Question

我现在正在编写一个HTML5页面，我遇到了一个问题，从使用br进行行间距到行高，填充或边距（以较容易者为准）切换格式。一切都在一个表单和fieldset标签内部我不希望每一行都是自己的，只是一些。有些文字我想要彼此相邻，因为我正在制作一个带有单选按钮和复选框的表单。但是我没有使用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>

...

Answer 1

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

您可以在标签/输入组周围使用标签和范围，以便更好地控制它们。

<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/

在CSS中将行间距从中更改为其他行间距方法

1 个答案: