在看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. php实现的短网址算法分享

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

  2. PHP系统左侧菜单栏的管理与实现

    在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...

  3. git添加本地仓库与远程仓库连接

    在本地建立一个文件夹,需要与远程git仓库进行连接,具体方法: <1>首先进入所在文件目录执行:  git init 初始化git,紧接着 git  add . git commit -m ...

  4. ng-csv 异步数据下载

    相信很多码友遇到一个很坑的问题吧,就是使用ng-csv  的时候 lazy-load="true" 设置为true 还是 会下载0行数据 var getArray= functio ...

  5. Git环境配置+VSCode中文乱码问题

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (files.autoguessEncoding= ...

  6. linux下lampp(xampp)安装memcached扩展

    原理:根据自己的lampp中的php版本,编译memcache时,引用对应下载的php版本,并安装后的php_config来生成memcache.so文件,再将这个so文件放置到lamppp对应位置, ...

  7. qemu-trustzone编译&运行（包含linux内核的编译方法）

    由于之前都是用的mtk6797开发板,回到实验室之后想要做实验的话需要弄一个支持trustzone的qemu,在这里记录一下我的编译和调试过程.本来最近一直忙着看论文和写论文,但是忽然发现自己在实验部 ...

  8. Shiro笔记--shiroFilter权限过滤

    1.shiro中shiroFilter中的一些配置页面的过滤权限 <!--名字必须和web.xml里面的filter-name一样--> <bean id="shiroFi ...

  9. 解决mac 中的myeclipse控制台中文乱码问题

    http://www.myexception.cn/eclipse/1742588.html 解决 http://my.oschina.net/u/555006/blog/195013

  10. (转载,但不知道谁原创)获取SPRING 代理对象的真实实例,可以反射私有方法,便于测试

    /** * 获取 目标对象 * @param proxy 代理对象 * @return * @throws Exception */ public static Object getTarget(Ob ...