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

为我认为您正在寻找的东西想出了一个更好的解决方案 - 在这种情况下，我绝对定位了 midnav：

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

这是一个更新的jsfiddle来演示。那是你想要做的吗？由于绝对定位，您需要调整 midnav 的 css 以使元素与左右导航元素垂直对齐。

于 2012-11-15T20:22:47.227 回答