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

输出看起来像这样（asteriks在这里代表单选按钮）：

Would you like to subscribe to our newsletter?

Yes * No * Questions or Comments

Answer 1

我尝试使用sample清除左侧选择div。改变了.choice样式，如bellow，

<强> CSS：

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

检查sample对您有用。

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

啦啦队..............

水平列表后无法清除浮动

4 个答案: