css如何对齐文本与文本输入框

html-css010

css如何对齐文本与文本输入框,第1张

中文字符的中线和英文字符的中线定义是不一样的，你在设置输入框与文本居中对齐的时候，最好将文本的字体样式设置成英文字体，比如font-family:Verdana这样有助于解决中线问题。然后再给输入框添加 vertical-align:middle样式。 注意，由于涉及到中线问题，所以字号会影响对齐的效果。例子就不举了，你可以改变字号（12px、13px等）自己尝试一下。

<style>

/*flex布局*/

  .row{

    display: flex

    flex-direction: row

  }

  .row > label{

    width: 100px

  }

  .row > .auto{

    flex:1

  }

  /*常规布局*/

.row:after{

  height: 0

  display: block

  clear: both

}

.row > label{

  width: 20%

  float: left

}

.row > .auto{

  width: 75%

  float: right

}

</style>

<div class="row">

  <label>1</label>

  <input class="auto" type="text" />

</div>

<div class="row">

  <label>1</label>

  <input class="auto" type="text" />

</div>

<div class="row">

  <label>1</label>

  <input class="auto" type="text" />

</div>

<div class="row">

  <label>1</label>

  <input class="auto" type="text" />

</div>

上面的flex布局有兼容性，某些浏览器不支持。