0

水平方向の ul-li ベースのナビゲーションを構築する方法を理解するのに助けが必要です。難しいのは、すべてのサイズがパーセントでなければならないことです。px も em もありません。さらに、すべてのリスト項目は同じ幅で、ul 全体を埋める必要があります。これに関するもう1つの問題は、少なくとも私の試みでは、7つのリスト項目があり、それぞれに醜い14.28 ...％が表示されることです-これまでの私の試みでは、メインコンテンツエリアが約1になりました-ブラウザ ウィンドウのサイズに応じて、2 ピクセル オフ。

ここに私が取り組んでいるレイアウトのスケッチがあります: 画像へのリンク (まだ十分な評判がないため)

私が今いる場所：

<ul id="#main_menu">
    <li class="main_menu_li"><a href="#">One</a></li><li class="main_menu_li"><a href="#">Two</a></li><li class="main_menu_li"><a href="#">Three</a></li><li class="main_menu_li"><a href="#">Four</a></li><li class="main_menu_li"><a href="#">Five</a></li><li class="main_menu_li"><a href="#">Six</a></li><li class="main_menu_li"><a href="#">Seven</a></li>
</ul>

#main_menu{
width: 100%;
list-style: none;
margin: auto 0;
padding: 0;
text-align: left;
overflow: auto;
}

.main_menu_li{
display: inline;
text-align: center;
margin: 0;
padding: 0;
width: 14.28%;
}

.main_menu_li>a{
text-decoration: none;
border: 1px solid #fff;
width: auto;
display: inline-block;
}

このコードの問題は、ul 内の右側にまだ余裕があることです。

あなたが私を助けてくれることを願っています！よろしくお願いいたします。

4

3 に答える 3

2

使用してみてくださいdisplay: table：

#main_menu{
    display: table;
}

.main_menu_li{
    display: table-cell;
    width: 14.28%;
}

.main_menu_li>a{
    display: block;
}
于 2013-03-23T16:34:57.290 に答える
1

わかりましたので、ここに別の選択肢があります。これはさらに互換性が低くなりますが、あなたに示すためだけに、そしてあなたが の使用に不快感を覚えているからですdisplay: table:

#main_menu
{
    width: 100%;
    display: flex;
    flex-direction: row;
    table-layout: auto;
}

#main_menu > li
{
    flex: 1 1 auto;
    width: 14.28%;
}

#main_menu > li > a
{
    display: block;
}

ここにフィドルがあります（Chromeでテスト済み）。

于 2013-03-23T17:17:43.490 に答える
0

少しのCSS3 マジックを使えば、これは十分に可能です。

これがフィドルです。重要な CSS:

nav > ul > li {
    float: left;
    width: 12.28%; /* for older browsers that don't support calc */
    width: -webkit-calc(100% / 7);
    width: -moz-calc(100% / 7);
    width: calc(100% / 7);
    background: white;
    color: #333;
}

ご覧のとおり、jQuery フォールバックを追加しました。残念ながら、JSFiddle は IE10 の IE8 モードでは動作しないようです。そのため、動作するかどうかをテストすることはできません。しかし、そうすべきです！

ここでわかるように、次のブラウザーがサポートされていcalc()ます。

  • FF4.0 以上 (-moz-プレフィックス)
  • IE9.0以降
  • Chrome 19.0 以降 (-webkit-プレフィックス)
  • Opera は最新のブラウザ (12.1) をサポートしていませんcalc
  • 詳細については、リンクを参照してください
于 2013-03-23T17:10:59.533 に答える