导航栏定位元素答案

【问题标题】：Navigation Bar positioning Elements导航栏定位元素
【发布时间】：2013-04-11 23:22:46
【问题描述】：

您好，这是我需要构建的：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>

当我只有一个导航元素时看起来一切正常：Navi with only one element

但是当我添加第二个导航元素时，导航看起来像这样：Navi with more than one element

我们该如何解决？

【问题讨论】：

我在你的标记中添加了第二个元素，添加第三个元素后它看起来仍然很好，最后一个出现在下面，但这只是因为你在
谢谢@MySqlError。我像上面的代码那样做了，但没有用。你用不同的风格编码了吗？

标签： html css menu navigation hover

【解决方案1】：

我猜你为每个li 标签指定了一个宽度。

ul.mn li a.mn1 {
  width: 104px;  
  background-image: url('mn1.png');
  background-position: 0 0;
}

在上面的代码中，您给出的宽度为 104px，因为 HOME 的图像宽度为 104px。因此，猜测您的下一个菜单项将具有更大的宽度，它的父级 ul 无法容纳在一行中。 ul 的宽度为 316px。

ul.mn {
  position: absolute;
  float: left;
  top: 316px;
  width: 316px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

您需要增加ul 的宽度才能使其工作。

【讨论】：

谢谢@anpsmn。现在看起来更好了，但元素之间有空格。你能告诉我如何解决这个问题吗？ s7.directupload.net/file/d/3229/3xvrf22j_png.htm
删除ul.mn li a的左边距

【解决方案2】：

假设您试图模仿您在初始帖子中引用的模拟网站。我相信您应该对解决菜单栏的 css 代码部分进行以下调整。你提供了什么：

ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:0; list-style-type: none; }

我的提议：

ul.mn { position: absolute; float: left; top: 316px; width: 850px; margin: 0 auto 0 10px; padding:0; list-style-type: none;}

请注意，我更改了宽度以反映由您定义的每个按钮 div 的组合宽度决定的宽度，从 978px 改为 850px，然后我建议不要将所有边距设置为 0，而是将顶部设置为 0 、右侧自动、底部 0 和左侧 10 像素（因为我从您的模型中看到，菜单左侧与徽标的左侧对齐）。进行这些更改后，我可以让您的菜单栏很好地位于标题 div 的底部。

请至少告知我您的进度。我一直在寻求分享想法并学习其他解决问题的方法。我相信这会让我们变得更加聪明。

祝你好运，史蒂夫

【讨论】：