问题描述:
下图中两个button各占50%,却上下左右都有缝隙存在。 需求是,去掉缝隙。
css代码如下:
.left-button { float: left; width: 50%; height: 100%; background-color: #404040; text-align: center; } .right-button { float: right; width: 50%; height: 100%; background-color: #00a546; text-align: center; }
解决方案(以下两种方法任选其一):
1.修改css代码
.left-button { border: none; //remove default border of button outline: none; float: left; width: 50%; height: 100%; background-color: #404040; text-align: center; } .right-button { border: none; //remove default border of button outline: none; float: right; width: 50%; height: 100%; background-color: #00a546; text-align: center; }
2.用a标签替换button标签
修改后效果见下图:
PS: <input type="button /> 会遇到和button标签同样的问题