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”不会产生空隙了。这种办法也会产生空隙,但是空隙会被掩盖掉。使用这种办法后,下一个元素要清除浮点带来的影响。

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

代码

这里写图片描述

效果

这里写图片描述


版权声明:本文为Ace_Arm原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。