在看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. centos-安装python3.6环境并配置虚拟环境

    python3.6下载地址:https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz linux下python环境配置 统一目录: 源码存放位置 ...

  2. python装饰器探究与参数的领取

    首先上原文, 现在,假设我们要增强now()函数的功能,比如,在函数调用前后自动打印日志,但又不希望修改now()函数的定义,这种在代码运行期间动态增加功能的方式,称之为"装饰器" ...

  3. WEB-INF目录下文件复制的几种方式

    2018年1月31日 10:42:55 工作完写点博客记录下. 需求:从web-inf下拷贝文件到指定目录. 目录结构 直接贴代码 第一种方式,字节流读取 try { int index = 0; S ...

  4. thinkPHP数据库操作

    thinkPHP如果要对数据库操作,一般来说首先要做的是在配置文件中链接数据库,然后用M方法实例化一张表,然后就是对表的操作了 可以开启调试功能查看程序执行的sql语句: 1.开启调试功能(默认是已经 ...

  5. WinFom中经典小游戏(含源码)

    最近整理了若干经典的小游戏,无聊时可以打发时间.程序本身不大,练手非常不错,主要是GDI编程,主界面地址如下图所示 源码下载方式 1,关注微信公众号:小特工作室(也可直接扫描签名处二维码) 2,发送: ...

  6. cookie session区别

      先理解为什么出现cookie和session: 为了使得网站可以跟踪客户端与服务器之间的交互,保存和记忆每个用户的身份和信息,我们需要一种强有力的解决方案,这样就产生了会话控制. 会话控制思想就是 ...

  7. Hibernate学习（四）get和Load比较

    package cn.lonecloud.test.crud; import org.hibernate.HibernateException; import org.hibernate.Sessio ...

  8. C++学习,两个小的语法错误-network-programming

    1.bool CServerSocket::initSocket(const char* ip=NULL,const UINT &port)://会出现默认参数为2的错误 解决方案: //C+ ...

  9. 【BZOJ1095】 Hide 捉迷藏

    Time Limit: 4000 ms   Memory Limit: 256 MB Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.W ...

  10. Spring 代理对象,cglib,jdk的问题思考,AOP 配置注解拦截 的一些问题.为什么不要注解在接口,以及抽象方法.

    可以被继承 首先注解在类上是可以被继承的 在注解上用@Inherited /** * Created by laizhenwei on 17:49 2017-10-14 */ @Target({Ele ...