Question

我一直在尝试找到常见问题的解决方案，但由于我的代码中有一些CSS规则，我无法使用我找到的任何解决方案。我有一个水平菜单（<ul> <li> <a>），其中包含不同的项目，宽度不同，我无法在菜单中分配项目，因此它们之间的空间相同。这是代码：

<nav id="main-menu">
     <ul class="child-menu">
         <li class="menu-1"><a>outsourcing tecnologico</a></li>
         <li class="menu-2"><a>seleccion de personal</a></li>
         <li class="menu-3"><a>solucion integral de nuevos profesionales</a></li>
         <li class="menu-4"><a>consultoria</a></li>
         <li class="menu-5"><a>formacion especializada</a></li>
         <li class="menu-6"><a>I+D+I<a></li>
    </ul>
</nav>

CSS：

#main-menu {
    background-color:#000;
    position:relative;
    margin:10px 0 0 0;
    width:980px;
    height:28px;
    float:left;
}

#main-menu ul {
width:980px;
margin:0;
}

#main-menu ul li {
float: left;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}

#main-menu ul li a {
display:block;
color:#fff;
text-decoration:none;
line-height:27px;
height:28px;
text-align:center;
}

Answer 1

如果不需要小于9.0版本，则以下内容将非常有用：

弹性盒属性。
2。ul { display:table; } ul li { display:table-cell; text-align:center }

Answer 2

不要在li上使用float而是使用display inline-block和* display：inline hack for IE with a zoom：1;然后，您可以为li添加边距以保持间距相同。使用text-align center将内容置于具有分配宽度的父元素上。

Answer 3

部分解决方案

我有一个可能是个好开头的解决方案：

#main-menu {
    background-color:#000;
    margin:10px 0 0 0;
    padding: 0;
    width:1080px;
    height:28px;
    float: left;
    overflow: auto;
    text-align: center;
}
.child-menu  {
    margin: 0;
    padding: 0;
    display: inline;
}
.child-menu li {
    display: inline;
    list-style: none;
    margin: 0 5px;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
.child-menu a {
    color:#fff;
    text-decoration:none;
}

用小提琴：http://jsfiddle.net/audetwebdesign/Tp7wH/

一些设计问题和问题

如果你固定main-menu的宽度，你会在最左边和最右边看到一些空格。

当我将宽度设置为980px时，链接包含在第二行中。你需要考虑这一点。

我将ul和li元素显示为内联，但如果您想要一个更像按钮的菜单外观，也可以使用内联块。

Answer 4

我的解决方案是在菜单项之间添加额外的空li元素，仅用于间距。如果事先知道水平菜单项的数量，则此解决方案很有效。它还允许第一个项目触摸包含元素的左边缘，最后一个项目触摸右边缘。当窗口变小时，菜单项不会被包装或重新排列。

HTML：

<ul class="tabs">
    <li><a href="#">First Item</a></li><li class="space"></li>
    <li><a href="#">Second</a></li><li class="space"></li>
    <li><a href="#">Bah</a></li><li class="space"></li>
    <li><a href="#">Last one is long</a></li>
</ul>

CSS：

.tabs{
    display:table;
    width:500px;
}
.tabs li{
    display:table-cell;
    white-space: nowrap;
}
.space {
    width: 33%; /* This should be 100 / (nr of elements - 1) */
}

以下是演示：http://jsfiddle.net/LqLE9/

在菜单上均匀分布具有不同宽度的多个项目

4 个答案: