0

標準を使用<nav> & <ul>すると、1 行に表示されるナビゲーションを簡単に作成できます。

ここに画像の説明を入力

デスクトップ: http://jsfiddle.net/Baumr/Be9ma/1/

これはレスポンシブ レイアウト用であるため、小さいディスプレイでは、ナビゲーションはメディア クエリを使用して 3 列 (場合によっては 2 列) に縮小されます (コードには含まれていません)。

ここに画像の説明を入力

モバイル: http://jsfiddle.net/Baumr/Be9ma/

しかし、それは審美的に間隔をあけていません:

要素の幅nav liが 33.3333% であるため、間隔が乱れています — 一部のナビゲーション項目は長く、一部は短くな​​っています。しかし、間隔は流動的ではありません。

各列を最も広い要素+パディング/マージンと同じ幅になるように調整するにはどうすればよいですか? つまり、ulout を分離したり入れ子にしたりせずに — セマンティクスを壊し、ワイド ディスプレイで表示した場合です。

簡単な HTML は次のとおりです。

<nav>
    <ul>
    <li>Home</li>
    <li>Very Long Link</li>
    <li>Blog</li>
    <li>About</li>
    <li>Also Long Link</li>
    <li>Email</li>
    </ul>
</nav>​

関連する CSS は次のとおりです。

nav {
    clear: both;
    background: pink;
}

    nav ul {
        padding: 20px 10px 0 30px;
        margin: 0;
        overflow: hidden;
        font-size: 16px;
    }

    nav li {
        font-variant: small-caps;
        text-decoration: underline;
        list-style: none;
        display: block;
        float: left;
        padding: 0 0 30px 0;
        margin: 0; 
        width: 33.33333%;
        float: left;
}

あなたのアイデアを聞きたいです。前もって感謝します！

PSクロスブラウザーの互換性とセマンティクスを強調したいと思います。

4

1 に答える 1

1

モバイル用の @media クエリをいくつか追加します。

http://jsfiddle.net/bf9cB/
変更を確認するには、中央のバーを開閉する必要があります

@media only screen and (max-width: 480px) {
    nav li { max-width:160px; text-align:center } /* This would only allow 3 to fit */
}

@media only screen and (max-width: 320px) {
    nav li { max-width:106px; text-align:center }
}

幅 320px の場合、フォント サイズに賭ける必要があります (参考までに)。あなたの問題は、私が最近読んだ本「モバイル ファースト」を思い出させます。一言で言えば、モバイルでビルドを開始し、そこから「上に」作業します。チェックアウトする価値があります。

于 2012-10-29T03:22:41.033 に答える