0

I have been trying to find a solution to a common problem but due to some CSS rules in my code I can't use any of the solutions that I have found. I have an horizontal menu (a <ul> <li> <a>) with different items, with different widths and I am not able to distribute the items inside the menu so they have the same space between each other. This is the code:

<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>

The 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

部分的な解決策

良いスタートになるかもしれない解決策があります：

#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 に設定すると、リンクが 2 行目に折り返されます。これについて考える必要があります。

ulここでは要素と要素をインラインで表示してliいますが、メニューをボタンのように見せたい場合は、インライン ブロックを使用することもできます。

于 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 に答える