如何居中无序列表？ [英] How to center an unordered list?
问题描述
我需要将未知宽度的无序列表居中，同时仍保持列表项目对齐。
I need to center an unordered list of unknown width, while still keeping the list-items left aligned.
获得与此相同的结果：
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; } 不工作，因为列表项目不会再对齐了。那么如何在保持< li> 左对齐的情况下，使< ul> parent div wrapper）？
Except my <ul> doesn't have a parent div. ul { margin: 0 auto; } doesn't work because I don't have a fixed width. ul { text-align: center; } doesn't work because the list-items won't be left aligned anymore. So how can I center this <ul> while keeping the <li>s left aligned (without having a parent div wrapper)?
<ul>
<li></li>
<li></li>
<li></li>
</ul>
EDIT ：也许我的写法不是最好的...第一个代码块已经工作...我需要的是没有 < div> 包装器，如果这是可能的。浮动技巧？伪元素技巧？必须有办法。
EDIT: Perhaps my wording wasn't the best... The first block of code already works... what i need is to do it without the <div> wrapper, if that's possible of course. Float tricks? Pseudo element tricks? There must be a way.
推荐答案
<html>
<body>
<style>
ul { display:table; margin:0 auto;}
<style>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html>
http： //jsfiddle.net/fNFYr/25/
编辑：没有注意到宽度问题。
didnt notice the width problem.
这篇关于如何居中无序列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
