我已将搜索栏 div
元素设置为 inline-block
,以及 img
。
但是,div
元素在图像下方,而不是在同一水平线上。
谁能告诉我为什么会这样?
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 20px;
}
#search {
display: inline-block;
}
#search input {
display: inline-block;
width: 584px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
最佳答案
您的样式正常工作; #search input
元素的宽度太宽了!尝试在更宽的屏幕上查看结果,您会看到元素按预期内联显示。
预料到您的下一个问题,您可以使用规则(在容器上,例如 #header
)防止内联元素换行:
空白:nowrap
预料到您的下一个问题(如果我可以这么大胆的话),您可能想要设置 CSS 规则:
vertical-align: middle
在 #header img
和 #search
上获得您想要的外观。
关于html - 内联 block 元素,在这种情况下不是内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38494167/