list - 水平列表后无法清除浮动

Question

我正在创建一个表单并使用浮动水平显示一组单选按钮以节省空间。但是，之后我无法清除浮动，收音机下方的标题就在它们旁边。

html代码如下：

<div class="choice">

<ul>

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li>
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li>

</ul>

</div>

<h2>Questions or Comments</h2>

我的CSS如下：

.choice ul li label {width: 30px;}

.choice ul li {float:left;}

.choice {clear:both;}

输出看起来像这样（这里的星号代表单选按钮）：

Would you like to subscribe to our newsletter?

Yes * No * Questions or Comments

Answer 1

我尝试使用 clear left 的样本作为选择 div。改变了.choice风格，如下所示，

CSS：

.choice:after {content:"#"; visibility:hidden; clear:both;}

检查样本对您有用吗。

Answer 2

h2 {clear:both;}

尝试了上述方法，它似乎工作。

Answer 3

您使用此样式代码

.choice ul li {clear:both}

Answer 4

这是清晰的代码。

HTML：

<div class="choice">

<ul>

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li>
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li>

</ul>
    <div class="clear"></div>
</div>

<h2>Questions or Comments</h2>

CSS：

.choice ul li label {width: 30px;}

.choice ul li {float:left;}

.clear {clear:both;}

欢呼..............