编辑:现在 flexbox 已经基本得到普遍支持,使用 flexbox!
我希望div
导航栏有 3 个彼此相邻的对象。右边应该有一个图像开始导航栏,最后一个结束它,中间部分应该尽可能宽以容纳所有文本。导航栏应该在页面的中间。我不确定我是否完全错了,因为它根本不起作用。这是我已经得到的代码。
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);
}