在看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元素间间距的方法。

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

  1. JS写的二级导航栏（利用冒泡原理）

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  2. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  3. 如何做一个导航栏————浮动跟伪类（hover）事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  4. 前端Vue项目——初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...

  5. 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

    效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...

  6. 用React写一个工大导航

    Online: https://brenner8023.github.io/gdut-nav/ GitHub地址: https://github.com/brenner8023/gdut-nav 笔者 ...

  7. iOS 程序初始一个带导航栏的视图

    @synthesize window = _window; @synthesize rootViewController = _rootViewController; - (BOOL)applicat ...

  8. CSS水平导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

随机推荐

  1. jquery $(document).ready() 与window.onload的区别（转）

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  2. MySQL 存储过程的简单使用

    首先创建一张 students 表 SQL脚本如下: create table students( id int primary key auto_increment, age int, name v ...

  3. Maven服务器

    Maven私服仓库管理: Nexus 3.0 使用nexus3.X搭建maven私服在Centos7环境中-详细教程

  4. virsh 常用操作

    virsh list 显示在运行的 虚拟机    virsh list --all 显示在运行和停止的虚拟机    ssh 192.168.0.115 通过网络连接子机   如果没有网络 可以通过 v ...

  5. linux文件权限查看及修改-chmod ------入门的一些常识

    查看Linux文件的权限:ls -l 文件名称查看linux文件夹的权限:ls -ld 文件夹名称(所在目录)修改文件及文件夹权限:sudo chmod -(代表类型)×××(所有者)×××(组用户) ...

  6. github page博客里添加多说评论插件

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 由于现在我这个博客原来用的是DISQUS评论插件,那全是全球 ...

  7. PowerDesigner 简单应用（转载）

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  8. HDU - 1407 打表

    思路:预处理10000以内所有数的三平方和即可. AC代码 #include <cstdio> #include <cmath> #include <algorithm& ...

  9. datanode启动不起来的各种原因

    一般在数据节点的log日志信息里能找到导致启动不起来的原因. 1.Namenode和Datanode的NamenodeID不一致 描述:一般在集群多次重新格式化HDFS之后,或者刚安装时会碰到.日志信 ...

  10. 跨域问题jsonp

    不得不说的同源政策: 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指域名,协议,端口相同.当一个浏览器的两个tab页 ...