0

我有带有文本的按钮，上面有太多空间。看起来像这样：

在此处输入图像描述

我怎样才能将文本定位得更高一点，这样它就不会被按钮的边框切割？

HTML：

<input type="button" value="a">

到目前为止，这是我的 CSS：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  height: 25px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
  padding: 0px;
}

该line-height属性不会改变任何东西，即使使用!important.

4

2 回答 2

3

设置固定高度会导致对齐失败。设置字体大小足以让 div 自动调整大小并且文本将居中。试试这个新的 CSS：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
}
于 2013-10-30T18:49:05.777 回答
0

如果您真的想保留按钮的固定宽度和高度以及文本的字体大小，那么您可以执行以下操作。这是将文本放在不同的 div 中，以便您可以将其放置在按钮的顶部。如果按钮是位置：相对，文本 div 是位置：绝对，并且 HTML 的结构是文本 div 在按钮标签内，那么它将很好地分层。此外，以这种方式完成时，文本将与按钮一起移动并且不会被移位（如果说你给按钮一个边距：100px）。

<button value="">
    <div id="buttonText">a</div>
</button>

Here is my CSS so far:

<style>
button {
    width: 40px;
    height: 25px;
    margin-right: 10px;
    position: relative;
}

#buttonText
{
    font-size: 30px;
    position: absolute;
    top: -9px;
    left: 9px;
    color: #FFF;
}
</style>
于 2013-10-30T20:12:11.403 回答