Question

我需要以下div才能拥有背景色 - 简单吧。但是，它无法正常工作。我已经完成了一些测试，并弄清楚它上面的浮子正在拧紧它。那么，我该如何解决这个问题呢？

.days{
background-color:#000;
}

span {
display:block;
width:200px;
float:left; 
}

<div class="days">
        <span>  
        <input id="Field9" name="Field9" type="checkbox"  value=""   size="3" maxlength="4" tabindex="4"  />
        <label class="days" >Monday</label>
        </span> <span>
        <input id="Field5" name="Field10" type="checkbox"  value="" size="3" maxlength="4" tabindex="4"    />
        <label   class="days" >Tuesday</label>
        </span> <span>
        <input id="Field5" name="Field11" type="checkbox"  value="" size="3" maxlength="4" tabindex="4"    />
        <label   class="days"  >Wednesday</label>
        </span> <span>  
    <!-- goes till sunday --!>
</div>

Answer 1

浮动元素时，将它们从文档的正常流中取出，结果，其他非浮动元素不会为它们腾出空间。

你所观察到的是你的div不再占据其子元素的全部高度，因为它们是浮动的。您需要做的就是“清除”或撤消浮动，并使days占据整个高度，并显示其背景颜色。清除浮动的首选方法是提供包含元素overflow: hidden：

.days
{
    background-color:#000;
    overflow: hidden;
}

有关清除浮动的详细信息，请查看有关它的Quirksmode.org文章，其中包含overflow: hidden方法的说明。

Answer 2

您可以将background-color应用于<span>，将高度设置为<div class="days">，或将<div>置于<span>下方的CSS clear:both;。

Answer 3

我假设您无法更改div的背景颜色。您可以在http://jsfiddle.net/FazXG/2/

查看固定版本

div背景颜色无法使用左侧输入

3 个答案: