1

いろいろ調べたのですが解決策がわかりません、

以下のHTMLを書きました。

<div id="navcontainer">
    <div class="leftnav">
        <a href="/blabla.aspx">Home</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test1</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test2</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test3</a>
    </div>

    <div class="midnav">
        <a href="#">MIDDLE</a>
    </div>

    <div class="rightnav">
        <a href="/blabla.aspx">test5</a>
    </div>

    <div class="rightnav">
        <a href="/blabla.aspx">test6</a>
    </div>
</div>

次の CSS を使用します。

#navcontainer div.leftnav
{
    float:left;
    text-align: left;
    vertical-align: middle;
    margin-left:6px;
    margin-top:6px;
}

#navcontainer div.midnav
{
    //
    // What do I put here?
    //
}

#navcontainer div.rightnav
{
    float:right;
    text-align: left;
    vertical-align: middle;
    margin-right:6px;
    margin-top:6px;
}

「navcontainer」に基づいて MIDDLE div を中央に配置したいのですが、div は「leftnav」と「rightnav」の div の数に基づいて取得し続けます。誰も私にそれを行う方法を説明できますか?

4

1 に答える 1

2

あなたが探していると思うもののためのより良い解決策を思いつきました - この場合、私はミッドナビを絶対に配置しました:

#navcontainer {
    position: relative;
}
#navcontainer div.midnav {
    position: absolute;
    left: 50%;
}

デモ用に更新されたjsfiddleを次に示します。それがあなたがやろうとしていることですか？絶対配置であるため、midnav の css を調整して、要素を左右の nav 要素と垂直方向に整列させる必要があります。

于 2012-11-15T20:22:47.227 に答える