0

私の目標は、画像を中央に配置し、コンテンツに合わせて縮小するナビゲーション/メニュー バーを作成することです。私が現在設計している方法では、ページが縮小すると、<li>収まらない項目が次の行に押し出され、ナビゲーション バーが高くなります。すべての li アイテムと画像は、nav コンテナーの高さをそのサイズに維持するために縮小し、ページを埋めるだけでオーバーフローしないようにする必要があります。

サンプルはこちら: http://jsfiddle.net/t5P7y/

<div class="container">
    <div class="nav-bar">
        <ul class="nav-ul">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li><img src="../Logo.png"></li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>
</div>
4

2 に答える 2

1

これを試してください：http://jsfiddle.net/t5P7y/6/

.nav-ul {
    display: block;
    padding: 0;
    margin: 0;
}
.nav-bar {
    display: block;
    height: 100px;
    background:red;
}
.nav-ul li {
    display: inline-block;
    float:left;
    width:14.2%;
}
.nav-ul img {
    height: auto;
    width: 100%;
}
.container {
    width: auto;
}
于 2013-10-20T20:48:19.493 に答える
0

これが本当にナビゲーション バーの良いデザイン選択であるかどうかという基本的な問題を超えて、javascript を導入せずにこれを達成するために考えることができる唯一の方法は<li>、リスト内のアイテムの数が変化する

.nav-ul li {
    float: left;
    width: 14.28%;
}
于 2013-10-20T20:47:26.900 に答える