在看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. Python之MYsql、数据库

    一.数据库的操作及安装 1.安装  MySQL Community Server 5.7.16   ----   版本 2.初始化   mysqld --inisialize-insecure 3.启 ...

  2. js实现点击切换显示隐藏，点击其它位置再隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 链表回文判断（C++）

    题目描述: 对于一个链表,请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法,判断其是否为回文结构. 给定一个链表的头指针A,请返回一个bool值,代表其是否为回文结构.保证链表长度小于等 ...

  4. Swift iOS 日期操作：NSDate、NSDateFormatter

    1.日期(NSDate) // 1.初始化 // 初始化一个当前时刻对象 var now = NSDate() // 初始化一个明天当前时刻对象 var tomorrow = NSDate(timeI ...

  5. php实现的短网址算法分享

    这篇文章主要介绍了php实现的短网址算法,理论上支持1,073,741,824个短网址,个人使用足够了,需要的朋友可以参考下 每个网址用6个字符代替,(6^32) 最多可以拥有1,073,741,82 ...

  6. HBuilder常用快捷键

    切换tab: Ctrl+Tab全部保存: Ctrl+Shift+S 激活代码助手: Alt+/显示方法参数提示: Alt+Shift+?转到定义: Ctrl+Alt+D 开启关闭注释整行: Ctrl+ ...

  7. MYSQL索引的类型和索引的方式

    索引的类型: normal:表示普通索引 unique:表示唯一的,不允许重复的索引,如果该字段信息保证不会重复例如身份证号用作索引时,可设置为unique full textl: 表示 全文搜索的索 ...

  8. PHP如何防止XSS攻击

    PHP防止XSS跨站脚本攻击的方法:是针对非法的HTML代码包括单双引号等,使用htmlspecialchars()函数 . 在使用htmlspecialchars()函数的时候注意第二个参数, 直接 ...

  9. 沉淀，再出发——安装windows10和ubuntu kylin15.04双系统心得体会

    安装windows10和ubuntu kylin15.04双系统心得体会 一.安装次序      很简单,两种安装次序,"先安装windows后安装linux:先安装linux后安装wind ...

  10. 五子棋的斜对角方向上的规则 -- java编程（简单粗暴版）

    五子棋判断输赢规则 --- 斜对角线方向上 一.左上右下方向上 1.分析图 2.代码 /**判断左上右下方向上是否有连续五颗相同颜色的棋子 * 全部遍历法 */ int loop = 0; boole ...