CSS布局——a标签模拟按钮水平居中

如何实现一个按钮居中

代码

效果

如何实现多个按钮居中无间隙

每两个内联元素之间有一定的空隙。
这个空隙是由于换行产生的，因为换行会产生一个文本节点

解决方法：

1. 不换行

缺点：不利于阅读

2. 改变字体大小

设置其父容器的font-size为0，再设置内联元素的字体大小。

3. 添加注释

在上一个标签尾部和下一个标签头部添加注释。

<div>
    <span>内联元素</span><!-- 
     --><span>内联元素</span>
</div> 

缺点：这种办法不会产生空隙，但会产生一个注释节点。

4. 第四种 设置“margin-left”’

这个办法是使用距左为负值把空隙覆盖掉

5. 设置字间距或者字符间距

在父容器的样式中改变“word-spacing”或者“letter-spacing”为负值，一般为-5也就好的。

6. 使用浮点形式

使用“float:left”不会产生空隙了。这种办法也会产生空隙，但是空隙会被掩盖掉。使用这种办法后，下一个元素要清除浮点带来的影响。

解决方法有好几种，在这里我主要使用的是第二种。

代码

效果