向输入元素添加值会导致它垂直移位

Question

我创建了5个内嵌按钮，如下所示：

＆＃13;

＆＃13;

.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
}

＆＃13;

<input type="submit" class="button" disabled value="1" name="example">

＆＃13;

＆＃13;

＆＃13;

现在的问题是当我输入值(Value="1")时，按钮高于没有值(Value="")的按钮，这是一个示例

注意：我尝试使用Firefox，这很好。

Answer 1

这是一个垂直对齐问题。

内联级元素（例如input，img和textarea）受vertical-align属性约束，其默认值为{{1 }}

在这种情况下，当您向输入添加文本时，基线会移动，元素会向下移动，以便在整个线上保留基线对齐。

使用baseline或其他值覆盖默认值，问题就解决了。

＆＃13;

＆＃13;

vertical-align: top

＆＃13;

.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
  vertical-align: top;     /* NEW */
  color: white;            /* for demo only */
}

＆＃13;

＆＃13;

＆＃13;

MDN的更多详情：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

只需将自定义对齐属性添加到您的类/ ID，就可以通过覆盖默认的对齐属性来解决典型的垂直对齐问题。