博客

问题描述：

下图中两个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标签同样的问题