您好，这是我需要构建的：Mockup
我卡在导航栏中，这是CSS：
/ * CSS文档* /
body {background:#fff url(bg.jpg) repeat-x; margin:0; padding:0; height:1800px; font- family:Arial, Helvetica, sans-serif;}
#wrapper {width: 1000px; margin: 0 auto;}
#header {height: 400px; width: 1000px; display: block; position: relative; }
#header .logo {position: absolute; width: 374px; height: 221px; display: block; float: left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px; left: 10px;}
#header .contact-info {position: absolute; width: 293px; height: 133px; display: block; float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; top: 100px; left: 700px;}
ul.mn {
position: absolute;
float: left;
top: 316px;
width: 316px;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.mn li {
float: left;
}
ul.mn li a {
display: block;
float: left;
height: 73px;
margin-left: 6px;
}
ul.mn li a.mn1 {
width: 104px;
background-image: url('mn1.png');
background-position: 0 0;
}
ul.mn li a.mn2 {
width: 212px;
background-image: url('mn2.png');
}
ul.mn li a.active, ul.mn li a:hover {
background-position: 0 73px;
}
和HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RW-Fliesen</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header_wrapper">
<div id="header">
<a href="index.html" class="logo" title="Logo"></a>
<div class="contact-info" title="contact-info"></div>
<ul class="mn">
<li><a href=" " title="" class="mn1 "></a></li>
<li><a href=" " title="" class="mn2 "></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
当我只有一个Navigation元素时看起来一切都很好：Navi with only one element
但是，当我添加第二个导航元素时，Navi如下所示：Navi with more than one element
我们该如何解决？
最佳答案
我猜您正在为每个li标签指定宽度。
ul.mn li a.mn1 {
width: 104px;
background-image: url('mn1.png');
background-position: 0 0;
}
在上面的代码中，您指定的宽度为104像素，因为HOME的图像为104像素。因此，猜测您的下一个菜单项将具有更大的宽度，而其父
ul无法容纳在一行中。 ul的宽度为316px。ul.mn {
position: absolute;
float: left;
top: 316px;
width: 316px;
margin: 0;
padding: 0;
list-style-type: none;
}
您需要增加
ul的宽度以使其起作用。