Question

我正在尝试在应用程序的按钮上添加一些格式。该按钮的代码目前如下所示：

.button {
  margin-left: 15px;
  background-color: #4BBB44;
  border: 2px solid #2BB922;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  height: 20px;
  padding: 15px;
}

<input id="Search" type="submit" value="Search" class="button">

我没有能够发布图片的声誉，但我想发布的屏幕截图显示了一个带有居中白色文字的绿色框，上面写着“搜索”，但它在底部被切断了如何停止文字被截断在底部？

Answer 1

删除height属性，或调整line-height以使按钮中的文本垂直居中。示例

.button {
  margin-left: 15px;
  background-color: #4BBB44;
  border: 2px solid #2BB922;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  height: 20px;
  padding: 15px;
  /* add this */
  line-height: 0;
}

<input id="Search" type="submit" value="Search" class="button">

Answer 2

这里的问题是高度，如果删除高度声明，按钮中的文本将正确对齐：

＆＃13;

.button {
  margin-left: 15px;
  background-color: #4BBB44;
  border: 2px solid #2BB922;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  line-height:1;
  cursor: pointer;
  padding: 15px;
}

＆＃13;

<input id="Search" type="submit" value="Search" class="button">

＆＃13;

Answer 3

其他方法是将height设置为line-height：

＆＃13;

.button {
  margin-left: 15px;
  background-color: #4BBB44;
  border: 2px solid #2BB922;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  line-height: 20px;
  padding: 15px;
  box-sizing: border-box;
}

＆＃13;

<input id="Search" type="submit" value="Search" class="button">

＆＃13;

Answer 4

    .button {
  margin-left: 15px;
  background-color: #4BBB44;
  border: 2px solid #2BB922;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  height: 20px;
  padding: 15px;
  /* add this */
  line-height: 0;
}
<input id="Search" type="submit" value="Search" class="button">

文字被截断按钮

4 个答案: