9

浏览器是火狐。

我有一个包含 15 个单选按钮的列表。像这样显示它们后：

<div class="abcd"  style="margin-left:10px;">
    <form id='some'....>
        <legend>Select Item type :</legend>
        <fieldset style="display:block;float:left;">
            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
            ...
        </fieldset>
        <p>
            <input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
            <button type="button" id="xxx" style="width:100;">Process</button>
        </p>
    </form>
</div>

一切都显示在一行中。我不确定如何在单选按钮下显示文本框，中间有一些空格。？

请帮忙。

4

4 回答 4

21

你的风格的问题是float: left，你必须清除“浮动”。在p标签处，包括clear:both，它告诉浏览器没有东西可以在它的左边或右边浮动。

<div class="abcd"  style="margin-left:10px;">
    <form id='some'>
        <fieldset style="display:block;float:left;">
            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

        </fieldset>
        <p style="clear:both">
            <input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
            <button type="button" id="xxx" style="width:100;">Process</button>
        </p>
    </form>
</div>
于 2012-08-15T21:22:02.677 回答
2

使用该float属性时，您必须清除它，以便其他元素不会出现在它旁边。尝试clear: both像这样添加到输入框的css：

<input placeholder="Enter Name/Value" name="Name" id="NameID" size="40" 
style="clear:both; display:block;"/>
于 2012-08-15T21:19:29.120 回答
2

粘贴

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

在字段集之后。

于 2012-08-15T21:20:27.393 回答
0

尝试将 css 规则添加到单选按钮本身。像这样：

<style type="text/css">
.group0
{
    display:block;
}
</style>

这假定group0是具有所有单选按钮的组。

于 2012-08-15T21:18:14.117 回答