如何将UL元素中的列表项目放在中间？
如何在不使用额外的div或元素的情况下，将ul中的列表项目放在中间。 我有以下。 我认为text-align:center会做的伎俩。 我似乎无法弄清楚。
<style> ul { width:100%; background:red; height:20px; text-align:center; } li { display:block; float:left; background:blue; color:white; margin-right:10px; } </style> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul>
检查jsfiddle http://jsfiddle.net/3Ezx2/1/
写display:inline-block而不是float:left 。
li { display:inline-block; *display:inline; /*IE7*/ *zoom:1; /*IE7*/ background:blue; color:white; margin-right:10px; }
http://jsfiddle.net/3Ezx2/3/
li{ display:table; margin:0px auto 0px auto; }
这应该工作。
看起来像所有你需要的是text-align: center; 在ul
更现代的方法是使用flexbox：
ul{ list-style-type:none; display:flex; justify-content: center; } ul li{ display: list-item; background: black; padding: 5px 10px; color:white; margin: 0 3px; } div{ background: wheat; }
<div> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div>
我之前遇到这个问题，发现有时候填充是问题。
通过从ul中删除填充，任何li被设置为inline-block将很好地居中：
* { box-sizing: border-box; } ul { width: 120px; margin: auto; text-align: center; border: 1px solid black; } li { display: inline-block; } ul.no_pad { padding: 0; } p { margin: auto; text-align: center; } .break { margin: 50px 10px; }
<div> <p>With Padding (Default Style)</p> <ul class="with_pad"> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <div class="break"></div> <p>No Padding (Padding: 0)</p> <ul class="no_pad"> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <div>
我加了div线，它做了诀窍：
<div style="text-align:center"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div>
无论是text-align:center还是display:inline-block为我自己工作，但两者结合：
ul { text-align: center; } li { display: inline-block; }
我遇到了一个问题，对我来说这很快，也是迄今为止我find的最好的解决scheme。
什么输出看起来像
显示代码的输出结果是什么边界只是显示间距而不是必需的。
HTML：
<div class="center"> <ul class="dots"> <span> <li></li> <li></li> <li></li> </span> </ul> </div>
CSS：
ul {list-style-type: none;} ul li{ display: inline-block; padding: 2px; border: 2px solid black; border-radius: 5px;} .center{ width: 100%; border: 3px solid black;} .dots{ padding: 0px; border: 5px solid red; text-align: center;} span{ width: 100%; border: 5px solid blue;}
不是所有的东西都需要居中列表项目。
你可以把css剪下来，得到相同的效果：
ul {list-style-type: none;} ul li{display: inline-block;} .center{width: 100%;} .dots{ text-align: center; padding: 0px;} span{width: 100%;}
