使用带有CSS </li> </ul>的左浮动<li>中心<ul>列表

Question

我必须重现这样一个菜单：

+----------------------------------------------------------------------------+
        Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

但实际上我有这个：

+----------------------------------------------------------------------------+
Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

我的代码：

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>

我对该代码的实际css是：

ul { list-style: none outside none; margin:0; padding: 0; }
li { float: left; margin: 0 10px; }

我怎么做？

PD：尽可能使用IE7替代。

提前谢谢！

Answer 1

请将此代码用于li：

li { margin: 0 10px; display: inline; }

将ul s'内容集中在一起：

ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }

Answer 2

在li中使用display: inline，在ul。

中使用text-align: center

ul { list-style: none outside none; margin:0; padding: 0; text-align: center }
li { display: inline; margin: 0 10px; }

示例：http://jsfiddle.net/ravan/gh29g/

Answer 3

只需将li的显示更改为inline-block; 并在text-align:center

中添加ul

请参阅演示：http://jsfiddle.net/adardesign/6RZL4/

Answer 4

制作项目display:inline和列表text-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; }

小提琴：http://jsfiddle.net/mohsen/rzfPW/

但是如果您的列表项中包含更多内容（比如鼠标悬停时显示的菜单项），那么使用display:inline并不是一个好方法。因为那时该项不是内联元素。

你可以显示：阻止并仍然让它们在中心对齐，浮动：左边，宽度和边距按百分比计算：

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}

小提琴：http://jsfiddle.net/mohsen/rzfPW/1/

请注意使用css中的百分比和像素（可能是边框）会导致错误

Answer 5

添加填充：0 10px;在李

这有些选项的中心 - 只需使用填充，直到你满意为止