关于内联元素input的问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

关于内联元素input的问题

杨冬芳 2016-06-06 18:00:05 1054

请问为什么黑色的input会跑出来啊?
把input的display属性改为block或者把两者的height改得大一点比如:50px,input才会进去,
但是即使是display:inline也不应该跑出来啊?
screenshot

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
*{ margin:0; padding:0; border:0}
#div{width:50px; height:5px;border:1px solid  #F80202;}
#input{ width:30px; height:5px;background:#000000; line-height:5px; vertical-align:middle}      
</style>

</head>
<body>

<div id="div">
    <input id="input" type="text">
</div>

</body>
</html>
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:29:10

    1.与line-height,vertical-align有关。
    2.一般默认字体大小16px,在#div里面字体大小当然也是16px了。当inline-block和文字在一行时(空格也算,不过没有空格,浏览器也是当作有文字对待的,测试结果),会有什么效果应该不用细讲吧。你设置的vertical-align:middle,会把input中心和文字baseline对齐,显然会有input被拉下去的效果。原理知道,想改也就有很多种方式了。父元素字体设置0px或者vertical-align:top
    3.input是inline-block元素,这里换成img等也是一样

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章