gpt4 book ai didi

html - 子 div 超出父 div

转载 作者:太空宇宙 更新时间:2023-11-04 12:07:06 25 4
gpt4 key购买 nike

我的代码:https://jsfiddle.net/k0hqzcwg/

我不明白为什么消息按钮移到父 div 之外。我尝试通过添加 clear: both 和添加 clearfix 类来清除 float ,但没有得到任何结果。

总而言之,我正在尝试与 Youtube 开展一项竞争性的视频共享服务,我在 CSS 和 Html 方面的高超技能一定会成功并让我成功。 讽刺

欢迎任何提示,我知道我还有很多东西要学。

对于那些不想点击链接的人:

HTML:

<body>

<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>

</body>

CSS:

body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}


#headingbarholder{
position:fixed;
left:0;
width: 100%;
}

#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}


#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}

#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}

#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}

最佳答案

将按钮向左浮动。

这里:

#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}

关于html - 子 div 超出父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29307865/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com