Sun*_*nny 24 html css center html-lists
我需要将无序宽度的无序列表居中,同时仍保持列表项左对齐.
获得与此相同的结果:
HTML
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
div { text-align: center; }
ul { display: inline-block; text-align: left; }
除了我<ul>没有父div.ul { margin: 0 auto; }不起作用,因为我没有固定的宽度.ul { text-align: center; }不起作用,因为列表项不再左对齐.那么我如何<ul>在保持<li>s左对齐的同时将其居中(没有父div包装器)？
<ul>
<li></li>
<li></li>
<li></li>
</ul>
编辑:也许我的措辞是不是最好的...第一个代码块已经工作...我需要的是做不的<div>包装,如果可能的话,当然.漂浮技巧？伪元素技巧？一定有办法.
Dem*_*tic 61
ul { display:table; margin:0 auto;}<html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html>这可能不符合您的确切要求，但它仍然非常有用：
ul {
text-align: center;
list-style-position: inside;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>小智 5
假设列表是：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
对于这个例子。如果我理解正确，您希望列表项位于屏幕中间，但您希望这些列表项中的文本位于列表项本身左侧的中心。这样做实际上非常简单。你只需要一些CSS：
ul {
display: table;
margin: 0 auto;
text-align: left;
}
它有效！这就是正在发生的事情。首先，我们说我们只想影响无序列表。然后，我们使用 Rafael Herscovici 的技巧将列表项居中。最后，我们说将文本与列表项的左侧对齐。