Html ul标签未正确拉伸，并出现一些奇怪的边距错误

我正在为自己建立一个网站，但我对导航有点迷恋

如您所见，联系人链接的li被强制下放到下一行

HTML

应该用Masic的东西，我用SASS做CSS，因为它更容易写，而且我在使用基金会。 为了解决这个问题，我在firefox中打开了inspector，这是我在选择ul时看到的：

所以ul占据了这个空间

现在，如果我看第一行最后一个li，我会看到：

所以李也没有占据这个空间

现在，问题是，当我去掉那些李的边距时，它会像预期的那样工作，而不会出现边距

---

现在，在基础上，阶级权利确实增加了一个浮动：权利；样式，所以这可能是我发现的问题，如果我添加宽度，效果会更好一些，但我仍然会得到一些类似的边距错误。

将li浮动到左侧，并在li的a上使用display:inline块。例如：

.nav li {
float:left;
padding:10px 15px 0px 15px;
line-height: 20px; 
list-style-type: none;
 }

 .nav a {
 vertical-align: middle;
display:inline-block;
text-align:center;
line-height: 20px; 
padding:5px;
 }

试试这个

css

---

看起来浮动、边距和宽度都有问题。你有类似于显示的东西：桌子；浮动：无；定义了您不需要的。在本例中，也不需要文本对齐，但这并不是导致问题的原因

最好的办法是把所有的东西都去掉。看看我用最基本的定义来实现目标。您还可以尝试删除属性，看看会发生什么。您不需要在容器元素上定义一个固定的宽度，除了在标题上定义100%的宽度

.header {
    width: 100%;
}

h3 {
    float: left;
}

.nav {
    float: right;
}

li {
    float: left;
    margin-right: 10px;
}

li:last-child {
    margin-right: 0;
}

上面是来自JSFIDLE的代码，它完成了实际的工作，示例中css中的额外工作只是为了演示

在页眉上设置100%宽度可确保页眉达到全宽，并为子元素留出空间

浮动和左右分别表示它们收缩到其内容的大小，而不扩展和向下推其他元素

在中，将向左浮动，并应用边距。：last-child选择器从最后一个选择器中删除边距，从而允许使用间距。然后，您可以将其均匀地放置在两侧

---

试试这个简化的例子，看看它是否有帮助。

没有什么不同，但是谢谢你的快速回答。也许你的导航区域宽度太小了。试着把它扩展一点你是说容器div？我将那个和导航div都设置为100%的宽度，这没有什么区别。根据Firefox的inspector，它们已经占据了整个屏幕的宽度，并且没有任何边距。在测试现场为我工作。右{width:30%；position:absolute；不要忘记类名前的句点。top:0px；right:0px；}.container{position:relative；width:100%；}body{background color:202020；}nav{background color:101010；}nav.container:after{clear:both；content:；display:table；}nav ul li{float:none；display:inline；text align:right；margin right:1%；}nav ul li a{color:AAA；}nav h3{color:AAA；margin:0%；margin left:10%；}。right{width:30%；position:absolute；top:0px；right:0px；}。容器{位置：相对；宽度：100%；}谢谢！给我几分钟时间在我的网站上试用一下，然后如果它有效的话，我会回来接受它。这对我来说是目前最有希望的。

.nav li {
float:left;
padding:10px 15px 0px 15px;
line-height: 20px; 
list-style-type: none;
 }

 .nav a {
 vertical-align: middle;
display:inline-block;
text-align:center;
line-height: 20px; 
padding:5px;
 }

body {
  background-color: #202020;
}

#nav {
  background-color: #101010;
}
#nav .container:after {
  clear: both;
  content: "";
  display: table;
}
#nav ul.right{
  width: 350px;
}
#nav ul li {
 float: none;
 display: inline;
 text-align: right;
 margin-right: 1%;
}
#nav ul li a {
 color: #AAA;
}
#nav h3 {
 color: #AAA;
 margin: 0%;
 margin-left: 10%;
}

.header {
    width: 100%;
}

h3 {
    float: left;
}

.nav {
    float: right;
}

li {
    float: left;
    margin-right: 10px;
}

li:last-child {
    margin-right: 0;
}