Question

我不理解为什么消息按钮移动到父div之外。我已经尝试通过添加clear来清除浮动：两者，并添加了一个clearfix类但没有得到任何结果。

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

Answer 1

将按钮向左浮动。

下面：

#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;
}

Answer 2

我会使用button代替浮动它：Fiddle

儿童div在父母div之外

2 个答案: