0

我一直试图找到一个常见问题的解决方案，但由于我的代码中的一些 CSS 规则，我无法使用我找到的任何解决方案。我有一个水平菜单 (a <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;
}
4

4 回答 4

1

如果不需要低于 9.0 版，那么以下内容将很有用：

  1. 弹性盒子属性。
  2. 2.ul { display:table; } ul li { display:table-cell; text-align:center }
于 2013-04-02T11:37:21.367 回答
0

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

于 2013-04-02T11:25:42.903 回答
0

部分解决方案

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

#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，你会在最左边和最右边看到一些空间。

当我将宽度设置为 980 像素时，链接会换成第二行。你需要考虑一下。

我将ulandli元素显示为内联，但如果您希望菜单看起来更像按钮，也可以使用内联块。

于 2013-04-02T12:14:57.637 回答
0

我的解决方案是在菜单项之间添加额外的空 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/

于 2013-08-08T07:02:58.367 回答