特殊情况下,input元素和父元素高度不一致,和兄弟input元素水平不对齐问题 vertical-align:baseline;

初到博客园,记录愚见,广听贤言.


下面代码中,由于一个div中共存两个不同type的input,当其中的text类型的value值为中文时,会导致父元素div的高度被撑开并且两个子元素不在同一水平线,经过多次试验,发现原因在于文本默认

的属性vertical-align:baseline;当value值为中文时,文字以基线垂直居中,导致了以上结果.

下给出个人解决方法:

1.给input添加样式 vertical-align:middle;或者vertical-align:top;

2.给input添加样式 line-height:20px;

<style>
 div {
    background: pink;
    width: 340px;
  }

  input {
    height: 20px;
    width: 130px;
    border: 1 solid #ccc;
  }

</style>

<body>
  <div>
    <input type="text" value="汉字">
    <input type="password" value="123">
<body>

特殊情况下,input元素和父元素高度不一致,和兄弟input元素水平不对齐问题 vertical-align:baseline;

猜你喜欢