[前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

在看W3school时，看到一个很好的例子，如何制作一个水平的导航栏？没有任何要求，只需要达到下面的效果：

我认为这个例子包含了很多css布局需要了解的知识，因此单独写一下。

 

W3school上面的方法是这样的——全部设置浮动：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

这个涉及到浮动的知识，这里不详述了。但是，还有没有其他方法呢？我想到另外一种方法，不用ul，直接把a设置为inline-block不就行了吗（原本的inline显然不行，因为不能设置长度，会导致大小不一）？

于是，我把代码改成了下面：

<!DOCTYPE html>
<html>
<head>
<style>
a
{
display:inline-block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</body>
</html>

但是，得出来的结果不如人意：

中间的间隙并不是我想要的（虽然实际开发中这些间隙也许会使布局更加美观），但这些间隙是因何而来？我上网查了一下，发现原来inline-block之间出现间隙的原因是标签之间的空格：

</a>
<a href="#news">

像这里两行之间就会被视作一个空格了，我们只需要消除HTML标签之间的空格就可以解决这个问题了。

这个网址很好地概括了消除inline-block元素间间距的方法：

http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

其中，我认为第一种方法是最好的：

像这样：

<body>
<a href="#home">
Home</a><a href="#news">
News</a><a href="#contact">
Contact</a><a href="#about">
About</a>
</body>

或者：

<body>
<a href="#home">Home</a
><a href="#news">News</a
><a href="#contact">Contact</a
><a href="#about">About</a>
</body>

再或者使用注释：

<body>
<a href="#home">Home</a><!--
--><a href="#news">News</a><!--
--><a href="#contact">Contact</a><!--
--><a href="#about">About</a>
</body>

 

这样，我们就有两种方法写水平导航条了。当然方法还有很多，这篇博客最主要还是用来提及消除inline-block元素间间距的方法。

 

posted @ 2018-03-10 13:53  fengzw  阅读(4082)  评论(1)  编辑  收藏  举报