在看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. 解决asp.net MVC中 当前上下文中不存在名称“model” 的问题

    在vs2013下打开同事上传的cshtml视图文件报错,出现当前上下文中不存在名称“model”,ViewBag,Url等等,在视图中也没有智能提示了:但是不影响编译运行,只是开发时候比较麻烦,但在同 ...

  2. txt文本文件记录日志

    private static void Log(string content, string fileName="log.txt") { string logsPath = App ...

  3. Spring Boot让开发如此简单

    从html到asp后一直专注.net开发,从.net诞生到如今,从winform到webform,从asp.net到.net mcv,从.net mvc到.net core,从ado.net到linq ...

  4. PHP执行Session与前端JS之间的关系

    <?php error_reporting(0); $path = './tmp/'; $sess_name = session_name(); echo $sess_name; $sess_i ...

  5. ubuntu下双网卡桥接

    1. 安装 brctl工具 sudo apt-get install bridge-utils 2. 添加桥 # brctl addbr br0 #创建桥接 br0 # brctl addif br0 ...

  6. Docker Centos7 下建立 Docker 桥接网络

    为什么要让docker桥接物理网络? docker默认提供了一个隔离的内网环境,启动时会建立一个docker0的虚拟网卡,每个容器都是连接到docker0网卡上的.而docker0的ip段为172.1 ...

  7. 原创！！jquery简单tips和dialog

    <!------------------html代码-----------------------> <!DOCTYPE html><html><head&g ...

  8. MySQL安装与使用过程中的相关问题

    数据库远程连接拒绝访问解决办法: 1. 改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql&q ...

  9. 微信小程序（一）

    开发流程 注册微信小程序并申请微信支付-->制作小程序-->上传并提交审核-->审核通过,小程序上线   开发微信小程序需要准备 企业公众号(被认证)以及申请小程序.微信开发技术.S ...

  10. CentOS命令修改系统时间同步

    使用Centos,遇到本地时间对不上,直接敲命令:date -s "2016-01-08  15:15:15"是立即生效了,但是重启后,系统时间还是原来的. 修改了其一是没有办法奏 ...