相邻的 div 用于导航答案

【问题标题】：Divs next to each other for Navigation相邻的 div 用于导航
【发布时间】：2013-10-07 16:48:39
【问题描述】：

编辑：既然 flexbox 已经基本得到普遍支持，那就使用 flexbox！

我希望导航栏有 3 个彼此相邻的 div 对象。右边应该有一个图像开始导航栏，最后一个结束它，中间部分应该尽可能宽以容纳所有文本。导航栏应该在页面的中间。我不确定我是否完全错了，因为它根本不起作用。这是我已经得到的代码。

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);
}

【问题讨论】：

标签： css image html navigation

【解决方案1】：

首先，您的 css 中有很多错误。

width:13;      // WRONG

width:13px;    //CORRECT

任何大于 0 的 width、height、margin、padding 都应该有 px、em 或 %

【讨论】：

【解决方案2】：

添加width: calc(100% - 26px); 将占用.navMiddle 的剩余宽度。

JSFIDDLE

【讨论】：

【解决方案3】：

如果不查看发生了什么，就很难诊断出这个问题。我想您需要在导航类上设置宽度。将所有三个类（navLeft、navMiddle 和 navRight）浮动在同一方向（很可能是左）可能会有所帮助。如果您想将所有这些垂直居中，您很可能需要确保包含此导航的任何内容的高度为 100%。

【讨论】：

【解决方案4】：

您好，我强烈建议您不必为所有这些硬编码而烦恼，并利用 flexbox。它提供了一个更清洁的解决方案，并且无需太多硬编码即可提供更多控制。

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

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

【讨论】：

旧版浏览器不支持，需要大量供应商细节。
是的，但他从来没有说过他需要这个做什么。可能有帮助
我并不是说它不好..我只是指出一些相关点。

【解决方案5】：

我会使用inline-block 而不是浮动。它给你更好的处理。

看看这个Fiddle

顺便说一句：0 以外的值需要有值，所以70 需要是70px

【讨论】：

【解决方案6】：

我认为您可以将

放在

之前

<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>

【讨论】：

【解决方案7】：

.navLeft, .navMidlle, .navRight{display:inline;}

我想这会起作用，您可以尝试测试一下。删除浮动：左；和浮动：对；也在你的 CSS 中。

【讨论】：

恭喜您获得第一个 StackOverflow 答案！将来，如果您可以在发布之前自己尝试答案以验证它是否有效，那将更有帮助。