CSS样式"display:block"无效

Question

浏览器是Firefox。

我有一个由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>

所有东西都在一行中显示。我不确定如何在单选按钮下方显示文本框并在它们之间增加一些空格。

请帮忙。

- rajeev

---

你应该在标签（如ABC）周围使用<label>标签。 - Sablefoste

为什么要将<input>元素设置为display:block？ - Spudley

如何在 ABC 周围添加 <label> 标签？另外，我在输入中使用了 block，因为我想将其显示在下一行。 - rajeev

Answer 1

你的样式问题在于使用了float: left，你需要清除"floatness"。 在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>

- Mauricio Souza Lima

Answer 2

使用float属性时，您必须将其清除，以防其他元素浮动到其旁边。尝试将clear: both添加到输入框的CSS中，如下所示：

<input placeholder="Enter Name/Value" name="Name" id="NameID" size="40" 
style="clear:both; display:block;"/>

- JohnFromMiami

Answer 3

粘贴

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

在`fieldset`之后。

- user1601479

Answer 4

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

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

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

- Phillip Schmidt