Question

假设我有这个导航栏

<div id = "nav">
        <a class = "menus" href = "#">Home</a>
        <a class = "menus" href = "#">Archive</a>
        <a class = "menus" href = "#">Blog</a>
        <a class = "menus" href = "#">Lab</a>
        <a class = "menus" href = "#">About</a>
      </div>

我有这个CSS规则

#nav{position:absolute; top:20%;}
.menus{border:1px solid black;}
.menus:hover{background-color: pink;}

我如何设置每个项目粘在一起？在给定的输出中每个导航项之间始终存在间距。我怎么设置它们粘在一起？

Answer 1

有几种方法，但最简单的方法是float元素。

#nav a {
   float: left;
}

jsFiddle

只要不继承您尚未发布的其他样式，就应该这样做。

问题是a元素之间的空格被渲染为空格。浏览器在渲染时会将多个空格折叠为一个空格。

jsFiddle

Answer 2

在您的.menu课程上执行此操作

 .menus
{
  display:block; 
  float:left;
}

检查一下：http://jsfiddle.net/GgsDv/1/

Answer 3

您在项目之间看到的空间是您在HTML代码中的每个<a>元素之后添加的新行的结果。因此，将所有链接放在一行中将以最直接的方式解决问题：

<div id = "nav">
   <a class = "menus" href = "#">Home</a><a class = "menus" href = "#">Archive</a><a class = "menus" href = "#">Blog</a><a class = "menus" href = "#">Lab</a><a class = "menus" href = "#">About</a>
</div>

将导航列表项设置为粘在一起

3 个答案: