0

編集：フレックスボックスが基本的に普遍的にサポートされるようになったので、フレックスボックスを使用してください！

divナビゲーション バーに3 つのオブジェクトを並べて配置したいと考えています。右側にはナビゲーション バーを開始するための画像があり、最後にはナビゲーション バーを終了するための画像があり、中央部分はすべてのテキストが収まるのに必要なだけ幅が広い必要があります。ページの真ん中。実際にはまったく機能しないため、完全に間違っていたかどうかはわかりません。これは私がすでに取得したコードです。

HTML:

<div class="navigation">
    <div class="navLeft"></div>
    <div class="navMiddle">
        <ul>
            <li id="active"><a href="index.html">Home</a></li>
            <li><a href="info.html">Info</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </div>
    <div class="navRight"></div>
</div>

CSS:

.navigation {
    margin: auto;
    height: 70;
}

.navigation ul {
    list-style: none;
}

.navigation ul li {
    display: inline;
    margin: 0px;
}

.navLeft {
    float: left;
    width: 13;
    height: 70;
    background: url(../images/Nav_L.png);
}

.navMiddle {
    height: 70;
    background: url(../images/Nav_Mid.png) repeat-x;
}

.navRight {
    float: right;
    width: 13;
    height: 70;
    background: url(../images/Nav_R.png);
}
4

7 に答える 7

1

まず、css に多くのエラーがあります。

width:13;      // WRONG

width:13px;    //CORRECT

0 より大きい任意widthの 、height、はmargin、、またはpaddingpxem%

于 2013-10-07T16:58:05.993 に答える
0

<div class="navRight"> を <div class="navMiddle"> の前に配置できると思います

<div class="navigation">
<div class="navLeft"></div>
<div class="navRight"></div> <!-- place navRight div here -->
<div class="navMiddle">
    <ul>
        <li id="active"><a href="index.html">Home</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>
</div>
于 2013-10-07T17:09:26.017 に答える
0 
.navLeft, .navMidlle, .navRight{display:inline;}

うまくいくと思いますので、試してみてください。float:left; を削除します。そしてfloat:right; あなたのcssでも。

于 2014-03-19T20:48:42.400 に答える
0

を追加width: calc(100% - 26px);すると、 の残りの幅が使用され.navMiddleます。

JSFIDDLE

于 2013-10-07T17:13:54.197 に答える
0

何が起こっているのかを確認せずに、この問題を診断することは非常に困難です。ナビゲーション クラスに幅を設定する必要があると思います。3 つのクラス (navLeft、navMiddle、および navRight) をすべて同じ方向 (おそらく左) にフロートさせると役立つ場合があります。これらすべてを垂直方向に中央揃えにしたい場合は、このナビゲーションを含むものの高さが 100% であることを確認する必要があります。

于 2013-10-07T16:53:02.823 に答える
0

inline-blockフローティングの代わりに使用します。それはあなたのより良い取り扱いを与えます。

このフィドルをチェックしてください

ところで：値を持つ必要がある以外0の値なので、そう70する必要があります70px

于 2013-10-07T16:55:41.827 に答える
0

こんにちは、これらすべてをハード コーディングして頭痛の種から解放し、 flexboxを利用することを強くお勧めします。これにより、はるかにクリーンなソリューションが作成され、多くのハードコーディングなしでより多くの制御が可能になります。

http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2013-10-07T16:55:56.540 に答える