Question

我希望我的导航栏上有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或{{1 }}

Answer 2

如果没有看到正在发生的事情，很难诊断出这个问题。我想你需要在导航类上设置一个宽度。将所有三个类（navLeft，navMiddle和navRight）沿同一方向浮动（很可能是左侧）可能会有所帮助。如果你想垂直居中所有这些，你很可能需要确保包含此导航的任何内容的高度为100％。

Answer 3

我使用inline-block代替浮动。它让你更好地处理。

查看此Fiddle

BTW：0以外的值需要有值，因此70需要70px

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

Answer 5

我认为你可以放置＆lt; div class =“navRight”＆gt;在＆lt; div class =“navMiddle”＆gt;

之前

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

Answer 6

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

<强> JSFIDDLE

Answer 7

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

我认为这样可行，你可以尝试测试一下。删除浮动：左;和浮动：对;在你的CSS也。

用于导航的彼此相邻

7 个答案: