Question

所以我有一个标签和一个字段。但由于某种原因，他们似乎并不一致。这是我的标记

<span class="hash">#</span>
<input type="text" class="hex" maxlength="6">

和CSS。

.hex {
width: 385px;
height: 40px;
font-size: 30px;
  font-family: 'proxima_novalight';
  outline: none;
  background: none;
  border: 3px solid black;
}
.hash {
font-size: 51px;
font-family: 'proxima_novalight';
}

我想将#与字段对齐。我试过了line-height，但这没效果。 Here's演示

Answer 1

您需要为这两个元素设置vertical-align:middle：

.hex {
    width: 385px;
    height: 40px;
    font-size: 30px;
    font-family: 'proxima_novalight';
    outline: none;
    background: none;
    border: 3px solid black; 
    vertical-align:middle; /* add this */
}
.hash {
    font-size: 51px;
    font-family: 'proxima_novalight';
    vertical-align:middle;  /* add this */
}

消除高度差

1 个答案:

Demo