Question

我正在使用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与其他块一起工作的原因是什么，但不是这个？

Answer 1

由于您正在浮动SPAN元素，因此您需要告诉DIV正确处理流量。将overflow:auto添加到类中就可以了。

强制性小提琴：http://jsfiddle.net/bznCp/1/

Answer 2

你需要清除花车

像这样

<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 style="clear:both;"></div>

之前添加了</div>

div和span一起

2 个答案: