使用 CSS 将 <ul> 列表与左浮动 <li> 居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7506333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a <ul> list with a left float <li>'s with CSS
提问by udexter
I have to reproduce a menu like this:
我必须重现这样的菜单：
+----------------------------------------------------------------------------+
Option 1 | Option 2 | Option 3 | Option 4 | Option 5
+----------------------------------------------------------------------------+
But actually I have this:
但实际上我有这个：
+----------------------------------------------------------------------------+
Option 1 | Option 2 | Option 3 | Option 4 | Option 5
+----------------------------------------------------------------------------+
My code:
我的代码：
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
My actual css for that code is:
我对该代码的实际 css 是：
ul { list-style: none outside none; margin:0; padding: 0; }
li { float: left; margin: 0 10px; }
How I can do it?
我该怎么做？
PD: IE7 alternative if possible.
PD：如果可能，IE7 替代品。
Thank you in advance!
先感谢您！
回答by Blender
Use this code for the lis instead:
使用此代码li代替 s：
li { margin: 0 10px; display: inline; }
And center your uls' contents:
并将您ul的内容居中：
ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }
回答by Ravan Scafi
Use display: inlinein li and text-align: centerin ul.
使用display: inline锂和text-align: centerUL中。
ul { list-style: none outside none; margin:0; padding: 0; text-align: center }
li { display: inline; margin: 0 10px; }
Example: http://jsfiddle.net/ravan/gh29g/
回答by adardesign
Just change the li's display to inline-block;
and add a text-align:centerto the ul
只需将 li 的显示更改为 inline-block；并添加text-align:center到ul
See demo: http://jsfiddle.net/adardesign/6RZL4/
回答by Mohsen
Making li items display:inlineand list text-align:centerwill solve the problem in this case:
在这种情况下，制作 li itemsdisplay:inline和 listtext-align:center将解决问题：
ul { list-style: none outside none; margin:0; padding: 0; border:1px solid #f33; text-align:center;}
li {display:inline; margin: 0 10px; border:1px solid #ccc; }
Fiddle: http://jsfiddle.net/mohsen/rzfPW/
小提琴：http: //jsfiddle.net/mohsen/rzfPW/
But if your list items had more stuff in it(like menu items to show when mouse hover) then using display:inlineis not good solution. because then the item is not an inline element.
但是，如果您的列表项中有更多内容（例如鼠标悬停时显示的菜单项），则使用display:inline不是好的解决方案。因为该项目不是内联元素。
You can do display:block and still have them aligned in center with float:left and having width and margin calculated by percent:
您可以执行 display:block 并仍然让它们与 float:left 居中对齐，并按百分比计算宽度和边距：
ul { list-style: none outside none; margin:0; padding: 0; border:1px solid #f33; text-align:center; padding:3px 0; overflow:hidden;}
li {display:block; width:16%; float:left; margin: 0 2%; background:yellow}
fiddle: http://jsfiddle.net/mohsen/rzfPW/1/
小提琴：http: //jsfiddle.net/mohsen/rzfPW/1/
Take note using percents and pixels(probably for borders) in your css will cause errors
注意在你的 css 中使用百分比和像素（可能用于边框）会导致错误
回答by Filth
Add padding: 0 10px; on the li
添加填充：0 10px；在里
This some what centers the options - just play around with the padding until you are happy with it
这一些是选项的中心 - 只需使用填充直到您对它感到满意
