如何解决为什么内部 div 是从这个 CSS 中的父 div 出来的?
body {
padding: 50px;
font: 14px "Lucida Grande",Helvetica,Arial,sans-serif;
}
a {
color: "#00b7ff"
}
#content {
background-color: aquamarine;
width: 800px;
height: 300px;
margin-left: auto;
margin-right: auto;
border: 2px solid blueviolet;
}
#room {
background-color: burlywood;
margin-bottom: 1em;
}
#messages {
width: 690px;
height: 300px;
overflow: scroll;
background-color: cadetblue;
margin-bottom: 1em;
margin-right: 10px;
border: 2px solid blue;
}
<div id='content'>
<div id='room'></div>
<div id='room-list'></div>
<div id='messages'></div>
<form id='send-form'>
<input id='send-messsage' />
<input type=s ubmit id='send-button' value='Send' />
<div id='help'>
Chat commands:
<ul>
<li>Change nickname: <code>/nick [username]</code> </li>
<li>Join/create room: <code>/join [room name]</code> </li>
</ul>
</div>
</form>
</div>
结果:
请解释为什么会出现内部矩形以及如何防止它?
解决方法
我相信这可能会有所帮助:
如果我们将#message 的高度降低到 282 像素,它将正确对齐。 因为上面的 div 是 #room 是 1em = 16px 而#content 是 2px 边框。所以总共 18px 它来自父 div。
我已经尝试了可以正常工作的更改。
body {
padding: 50px;
font: 14px "Lucida Grande",Helvetica,Arial,sans-serif;
}
a {
color: "#00b7ff"
}
#content {
background-color: aquamarine;
width: 800px;
height: 300px;
margin-left: auto;
margin-right: auto;
border: 2px solid blueviolet;
}
#room {
background-color: blurrywood;
margin-bottom: 1em;
}
#messages {
width: 690px;
height: 282px;
overflow: scroll;
background-color: cadetblue;
margin-bottom: 1em;
margin-right: 10px;
border: 2px solid blue;
}
<div id='content'>
<div id='room'></div>
<div id='room-list'></div>
<div id='messages'></div>
<form id='send-form'>
<input id='send-messsage' />
<input type=s ubmit id='send-button' value='Send' />
<div id='help'>
Chat commands:
<ul>
<li>Change nickname: <code>/nick [username]</code> </li>
<li>Join/create room: <code>/join [room name]</code> </li>
</ul>
</div>
</form>
</div>
#content{
overflow:hidden;
}
#messages{
line-height:50%;
}
,
-
#message
div 太大。 - 父 div 的默认
overflow
属性显然设置为visible
。
现在,至于如何修复它,这取决于您要尝试做什么。但这是两个促成因素。
,您确定您的代码正确吗? css 中的 id 与 html 文件中的任何 id 都不匹配。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。