使用CSS使左浮动的<li>元素居中于<ul>列表中。

Question

使用CSS使左浮动的<li>元素居中于<ul>列表中。

14

我需要重现一个像这样的菜单：

+----------------------------------------------------------------------------+
        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; }

我该如何做？

附注：如果可能的话，需要IE7的替代方案。

提前致谢！

- udexter

5个回答

4

在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; }

Example: http://jsfiddle.net/ravan/gh29g/

- Ravan Scafi

如果您想在li的内部设置anchors为display: block;,则需要使用breaks。 - sg3s

这是一个菜单，对吗？或者至少它有链接、a标签和锚点吧？您是否在它们上面设置了display: block呢？如果是的话，这会显示出问题。http://jsfiddle.net/ravan/gh29g/ - sg3s

1

将li元素设置为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; }

enter image description here

Fiddle: http://jsfiddle.net/mohsen/rzfPW/

但是，如果您的列表项中有更多内容（例如在鼠标悬停时显示的菜单项），那么使用display:inline不是一个好的解决方案。因为这样该项就不是内联元素了。

您可以使用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}

enter image description here

代码编辑器：http://jsfiddle.net/mohsen/rzfPW/1/

请注意，在CSS中使用百分比和像素（可能是用于边框）会导致错误。

- Mohsen

谢谢，"overflow: hidden" 就是我要找的，这样 <ul> 元素就不会在 <li> 上崩溃了。 - John

1

只需将li的display更改为inline-block; 并在ul上添加text-align:center

查看演示：http://jsfiddle.net/adardesign/6RZL4/

- adardesign

不支持旧版浏览器（咳嗽 IE7 < 咳嗽） - sg3s

还有一种人工的“空间”在元素之间，参见 https://css-tricks.com/fighting-the-space-between-inline-block-elements/。 - Nick Mitchell

-1

在li上添加padding: 0 10px;

这会使选项有些居中 - 只需调整padding直到您满意为止。

- Filth

然后调整窗口大小，你又得再摆弄一遍。 - Blender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blender · Accepted Answer

请改用以下代码替换 li 标签：

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

让你的 ul 中的内容居中：

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