div和span在一起

问题描述

| 我正在使用CSS样式表在HTML中设置多个块的样式。类“ header”用于表示这些块。 在我的CSS工作表中，我有：

.header
{
    background-color: #efefef;
    margin-bottom:.4em;
}

然后在HTML中，我有：

<div class = \"header\">
    <span style = \"float:left;\" >
    <b>My&nbsp;Colors</b></span>
    <span style = \"float:right;\" >
    <input type=\"text\" name=\"color\" value = \"Enter&nbsp;a&nbsp;color\"/>
    <input type=\"submit\" value=\"Add\" /></span>
</div>

以及其他使用

class = \"header\"

的块。其他块的样式正确，但是上面的块样式不正确（CSS对此没有影响）。 将span标记放入div会出问题吗？ CSS与其他模块一起工作的原因是什么，但不是这个？     

解决方法

您需要清除浮子 像这样

<div class = \"header\">
    <span style = \"float:left;\" > <b>My&nbsp;Colors</b></span>
    <span style = \"float:right;\" >
        <input type=\"text\" name=\"color\" value = \"Enter&nbsp;a&nbsp;color\"/>
        <input type=\"submit\" value=\"Add\" />
    </span>
    <div style=\"clear:both;\"></div>
</div>

我在

</div>

之前加了

<div style=\"clear:both;\"></div>

    ,由于您要浮动SPAN元素，因此需要告诉DIV正确处理流程。在班上加6英镑就可以解决问题。 强制提琴：http://jsfiddle.net/bznCp/1/