子div超出父div

debugcn 发表于 Dev

泰勒·亚当斯（Tyler Adams）

我不明白为什么消息按钮移到父div之外。我试过通过添加clear：both和clearclear类来清除浮点数，但是没有得到任何结果。

总而言之，我正在尝试与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;
}