-1

我现在正在编写一个 HTML5 页面，我在将格式从使用 br 用于行间距切换到行高、填充或边距（以更容易的为准）时遇到问题。一切都在表单和字段集标记内，我不希望每一行都是独立的，只是一些。我确实想要一些文本彼此相邻，因为我正在制作一个包含单选按钮和复选框的表单。但不是使用 br 标记，而是如何将其切换为 css 中的行高、填充或边距。

<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>

……

4

1 回答 1

0

尝试为每组无线电使用一个字段集，以便您可以更精确地控制它们，仅在您的组周围设置边距等。

您可以使用标签并跨越标签/输入组，以便更好地控制它们。

<span>
    <label for="name">Value</label>
    <input type="checkbox" name="name" value="1"/>
</span>

此外，如果您使用特定于您的输入的类，则可以使其显示在块中，如下所示：

input.block {
    display: block;
}

那么如果你把这个类块放在你的输入上，标签将留在另一行......

如需更大的图片，请参阅此小提琴：

http://jsfiddle.net/BxwNL/1/

更新：根据肉桂评论的另一种解决方案

您也可以为您的项目使用列表，但如果您根据它们的属性对它们进行分组，例如颜色列表，类型列表......

用法如下：

<ul>
    <li>
        <label for="name">Value</label>
        <input type="checkbox" name="name" value="1"/>
    </li>
    <li>
        <label for="name2">Value2</label>
        <input type="checkbox" name="name2" value="2"/>
    </li>
</ul>

列表解决方案的小提琴示例：http: //jsfiddle.net/BxwNL/2/

于 2013-02-16T00:14:09.270 回答