1

これが私の苦労です。だから私はどうすればナビゲーションバーのリンクをナビゲーションの100％に埋めさせることができるのだろうと思っていました。そのため、間隔は同じになり、リンクが追加されるとフォントサイズが小さくなります。このようにすると、常に100％入力されます。

今のところ、これは達成できないようです。設定されたパディングしかありませんが、次のようなことを試してみました。

display: block;
float: left;
width: 100%;

しかし、それは私にまったく機能しないあらゆる種類の効果を与えています：S

これについて私を助けることができる人はいますか？

Codepenの例

4

3 に答える 3

1

これを行う方法はdisplay: table、親とdisplay:table-cell子で使用することです。IEの一部のバージョンでは機能しないと思います（もちろん）。これが例です

于 2013-03-11T13:10:38.747 に答える
1

#main-navigation から width を削除し、#main-navigation li に、100/the_numberof_elements_in_the リストに等しい値を追加します。CSS は次のようになります。

#main-navigation {
    height: 54px;
    overflow: hidden;
    border-bottom: 1px solid black;
}

#main-navigation ul {
    height: 54px;
    overflow: hidden;
}

#main-navigation li {
    font-size: 1.0em;
    text-transform: uppercase;
    list-style: none;
    float: left;
    width: 20%;
}

このようにして、使用可能なすべての幅をナビが占めるようになりますが、フォントサイズは自動的にサイズ変更されません。要素の数の関数でも変更する必要があります (li の幅に対して行う必要がある方法と同様)。このリストをサーバー側で動的に生成している場合は、css で同じことを行い、これら 2 つの属性の正しい値を計算できます。リストの作成に ajax を使用している場合は、javascript を使用して属性を変更できます。

于 2013-03-11T13:19:48.457 に答える