我可以居中吗<ul>左对齐<li>年代？</li></ul>
[英]Can I center a <ul> with left-aligned <li>s?
问题描述
我想将左对齐项目列表居中。
这是我目前拥有的：
<!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>
这会产生一个如下所示的页面：
我真正想要的是这样的：
我可以通过添加width: 200px; 到#content ul ，但问题是我有很多这样的列表，它们都有不同的宽度。
我希望<ul>缩小到内容，以便它可以正确居中。 还是我以错误的方式解决这个问题？
感谢您的任何帮助，您可以提供。
解决方案
将这四行添加到#content ul的 CSS 规则中：
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
我已经在 IE6、IE7、IE8 和 Firefox 3.6 中对此进行了测试。 结果看起来像上面的第二张图片，并且列表总是适合项目的内容。
5 个解决方案
解决方案1
32 已采纳 2010-07-28 16:36:40
设置<ul>使用display: inline-block; . 请参阅http://jsbin.com/atizi4 。
请注意，IE ≤7 不支持（完全） inline-block 。
解决方案2
1 2010-07-28 16:42:58
您可能可以采用我以前的答案。 IE 的内联块，现代浏览器的 display:table。 可能需要明确指定列表样式类型。
编辑：由于这是一个列表，因此可能能够摆脱ul上的inline-block而不是 display:table。 您需要在单独的规则中声明display:inline; 在 IE inline-block之后。
解决方案3
0 2010-07-28 16:31:01
我会考虑使用 CSS 并在具有最大宽度容器的<ul>上放置一个margin: 0 auto 。
解决方案4
0 2010-07-28 17:05:01
尝试这个。 它涉及不兼容性，但我真的不知道旧浏览器如何处理边距和填充以及所有这些，因为我只使用新浏览器。 它只涉及对您的 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;
}
编辑：我想澄清我改变了什么。 我改变了内容的对齐方式，但老实说，你可以把它改回来，我认为它没有效果。
我最初所做的是设置一个固定的宽度并将你的li元素居中，你没有任何样式。 这只是内容的中心。 你放置的边框在ul上，所以它很宽，但如果我们把它放在li上，那么我们会有很多盒子。 所以，我拆分了边框样式。 #content ul具有 202px 宽度的原因是因为边框在宽度的外部计数。
我希望解释清楚地说明它为什么起作用。 祝你好运。 我在谷歌浏览器中测试了这个
解决方案5
0 2022-07-02 21:45:14
与任何浏览器兼容的解决方案，无论它有多旧：将表格居中并将列表放入其中。
例子：
<table style="margin-left:auto; margin-right:auto;"><tr><td>
<ul>
<li>Line1</li>
<li>Line test 2</li>
<li>Line long for test</li>
</ul>
</td></tr></table>
如何居中 <ul> 文本左对齐并设置了最大宽度时的内容？
[英]How to center <ul> content while text is left-aligned, and max-width is set on it?
如何居中<ul>尽管<li>元素文本左对齐？</li></ul>
[英]How to center an <ul> while <li> elements are text-aligned to the left?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.