css - 彼此相邻的 Div 用于导航

Question

编辑:既然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);
}

Answer 1

首先你的css有很多错误。

width:13;      // WRONG

width:13px;    //CORRECT

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