特殊情况下,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>