我正在尝试使用包含在无序列表中的 4 个图像制作一个简单的导航栏。
我遇到了问题,因为栏没有对齐,它就像嵌套在其中的父 div 有一个 padding-left 分配给它,并将无序列表推到右侧。这是正在发生的事情的图片:
我在主导航 div 上有一个边框,以查看发生了什么。
这是我的代码:
<div id="container">
<div id="header">
<h1 class="hidden">Blue Ridge Fencing</h1>
</div>
<div id="navigation">
<ul>
<li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
<li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
<li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
<li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"></li>
</ul>
</div>
<div id="content">
</div>
</div>
和CSS:
#navigation {
height: 50px;
width: 1000px;
background-image: url(../images/backgrounds/otis_redding.png);
overflow: hidden;
padding: 0px;
border: 1px solid #000;
}
#container #navigation ul {
margin: 0px;
list-style-type: none;
font-size: 34px;
}
#container #navigation li {
float: left;
}
先感谢您!