Html 我可以将 <ul> 与左对齐的 <li> 居中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3355058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I center a <ul> with left-aligned <li>s?
提问by Travis
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 ulbut the problem is that I have a lot of lists like this and they all have various widths.
我可以通过添加width: 200px;来实现这一点，#content ul但问题是我有很多这样的列表，而且它们都有不同的宽度。
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?
我希望<ul>缩小到内容，以便它可以正确居中。还是我以错误的方式解决这个问题？
Thanks for any help you can provide.
感谢您的任何帮助，您可以提供。
Solution
解决方案
Thanks to KennyTMand Magnar, here is the solution:
Add these four lines to #content ul's CSS rules:
将这四行添加到#content ul的 CSS 规则中：
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.
我已经在 IE6、IE7、IE8 和 Firefox 3.6 中对此进行了测试。结果看起来像上面的第二张图片，列表总是适合项目的内容。
采纳答案by kennytm
Set the <ul>to use display: inline-block;. See http://jsbin.com/atizi4.
设置<ul>使用display: inline-block;。请参阅http://jsbin.com/atizi4。
Note that inline-blockis not supported (completely) for IE ≤7.
请注意，inline-blockIE ≤7 不支持（完全）。
回答by meder omuraliev
You can probably adopt my previous answer. Inline-block for IE, display:table for modern browsers. Might need to explicitly specify a list-style-type.
你可以采纳我之前的回答。IE 的内联块，现代浏览器的 display:table。可能需要显式指定列表样式类型。
Edit: Since this is a list, may be able to get away with inline-blockon the uland not display:table. You need to declare in a separate rule, display:inline;after inline-blockfor IE.
编辑：由于这是一个列表，因此可以inline-block在ul而不是 display:table上逃脱。您需要在单独的规则中声明，display:inline;在inline-blockIE 之后。
回答by Tarik
Try this. It involves in incompatibilities, but I don't really know how older browsers handle margins and padding and all that anymore since I only work with new ones. It only involves some minor changes to your CSS.
尝试这个。它涉及不兼容性，但我真的不知道旧浏览器如何处理边距和填充以及所有这些，因为我只使用新浏览器。它只涉及对 CSS 的一些细微更改。
/* I didn't style the other parts, so I'm taking them out to save space. */
#content {
margin: 0 auto;
}
#content ul {
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
width: 202px;
}
#content li {
border-left: solid 1px #666666;
border-right: solid 1px #666666;
margin: 0 auto;
padding: 0;
width: 200px;
}
Edit:I want to clarify what I changed. I changed how content is aligned, but honestly, you can change that back, I don't think it has an effect.
编辑：我想澄清我改变了什么。我改变了内容的对齐方式，但老实说，你可以把它改回来，我认为它没有效果。
What I originally did was set a fixed width and centered your lielement, which you had no styling for. That just centered the content. The border you placed was on the ulso it was very wide, but if we placed it in the lithen we would have many boxes. So, I split the border style. The reason why #content ulhas a 202px width is because borders count on the outside of the width.
我最初做的是设置一个固定的宽度并居中你的li元素，你没有样式。这只是集中内容。您放置的边框位于 上，ul因此非常宽，但是如果我们将其放置在 上，li则会有很多框。所以，我拆分了边框样式。#content ul宽度为 202px的原因是边框计数在宽度的外侧。
I hope the explanation made it clear to why it worked. Good luck! I tested this out in Google Chrome.
我希望解释清楚地说明它为什么起作用。祝你好运！我在谷歌浏览器中对此进行了测试。
回答by David Yell
I'd look at using CSS and putting a margin: 0 autoon the <ul>with a maximum width container.
我会考虑使用 CSS 并margin: 0 auto在<ul>具有最大宽度的容器上放置一个。
