如何居中无序列表? [英] 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屋!