我可以将< ul>与左对齐的< li> s？ [英] Can I center a <ul> with left-aligned <li>s?
问题描述
这是我目前所拥有的：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> Shrinkwrapped List< / title>
< style type =text / css>
#wrapper {
margin：auto;
width：500px;
border：solid 1px #CCCCCC;
}
#header {
text-align：center;
font-size：200％;
}
#content {
text-align：center;
}
#content ul {
text-align：left;
font-size：150％;
list-style-type：none;
margin：20px auto;
padding：0px;
border：solid 1px＃666666;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =header>
Shrinkwrapped List
< / div>
< div id =content>
< ul>
< li> Lorem ipsum< / li>
< li> Dolor sit amet< / li>
< li> Consectetur< / li>
< li>适应elit< / li>
< li> Morbi odio< / li>
< li> Mi blandit vehicula< / li>
< / ul>
< / div>
< / div>
< / body>
< / html>
这产生的页面看起来像：
我真的想看起来像this：
我可以通过将 width：200px; 添加到 #content ul 但是问题是我有很多这样的列表，他们都有各种宽度。
我想要< ul> 缩小到内容，以便它可以正确居中。
感谢您提供任何帮助。
解决方案
感谢 KennyTM < a>和 Magnar ，以下是解决方案：
添加这四行到 #content ul 的CSS规则：
：-moz-inline-stack;
display：inline-block;
zoom：1;
* display：inline;
我在IE6，IE7，IE8和Firefox 3.6中测试过。
设置< ul> 使用 display：inline-block; 。请参见 http://jsbin.com/atizi4 。
请注意，IE≤7不支持（完全） inline-block 。
I'd like to center a list of left-aligned items.
This is what I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shrinkwrapped List</title>
<style type="text/css">
#wrapper {
margin: auto;
width: 500px;
border: solid 1px #CCCCCC;
}
#header {
text-align: center;
font-size: 200%;
}
#content {
text-align: center;
}
#content ul {
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
border: solid 1px #666666;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Shrinkwrapped List
</div>
<div id="content">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipiscing elit</li>
<li>Morbi odio</li>
<li>Mi blandit vehicula</li>
</ul>
</div>
</div>
</body>
</html>
Which produces a page that looks like:
What I really want looks like this:
I can accomplish this by adding width: 200px; to #content ul but the problem is that I have a lot of lists like this and they all have various widths.
I'd like the <ul> to shrink to the content so it can be centered correctly. Or am I going about this the wrong way?
Thanks for any help you can provide.
Solution
Thanks to KennyTM and Magnar, here is the solution:
Add these four lines to #content ul's CSS rules:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
I've tested this in IE6, IE7, IE8 and Firefox 3.6. The results looks like the second image above and the list always fits to the content of the items.
Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.
Note that inline-block is not supported (completely) for IE ≤7.
这篇关于我可以将< ul>与左对齐的< li> s？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
