Question

我有一堆单选按钮＆amp;标签如下：

<input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
<label for="">Yes </label>

<input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
<label for="">No </label>

<input type="radio" id="FID3626" name="Discipline" value="May be" class="" title="" data-test="test">
<label for="">May be </label>

<input type="radio" id="FID3626" name="Discipline" value="Option A" class="" title="" data-test="test">
<label for="">Option A </label>

<input type="radio" id="FID3626" name="Discipline" value="Option B" class="" title="" data-test="test">
<label for="">Option B </label>

<input type="radio" id="FID3626" name="Discipline" value="Option C" class="" title="" data-test="test">
<label for="">Option C </label>

<input type="radio" id="FID3626" name="Discipline" value="Option D" class="" title="" data-test="test">
<label for="">Option D </label>

<input type="radio" id="FID3626" name="Discipline" value="Option E" class="" title="" data-test="test">
<label for="">Option E </label>

这些是从元数据生成的。渲染后，它们出现在一行中，这是正常的。

我需要每个标签＆amp;它的收音机在一条线上。我需要使用CSS。出于某种原因，我无法保持输入和输入一个div下的标签。

提前致谢。

Answer 1

使用伪元素::after。请查看以下示例。

＆＃13;

label::after {
  content: "";
  display: block;
}

＆＃13;

<input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
<label for="">Yes</label>

<input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
<label for="">No</label>

<input type="radio" id="FID3626" name="Discipline" value="May be" class="" title="" data-test="test">
<label for="">May be</label>

<input type="radio" id="FID3626" name="Discipline" value="Option A" class="" title="" data-test="test">
<label for="">Option A</label>

<input type="radio" id="FID3626" name="Discipline" value="Option B" class="" title="" data-test="test">
<label for="">Option B</label>

<input type="radio" id="FID3626" name="Discipline" value="Option C" class="" title="" data-test="test">
<label for="">Option C</label>

<input type="radio" id="FID3626" name="Discipline" value="Option D" class="" title="" data-test="test">
<label for="">Option D</label>

<input type="radio" id="FID3626" name="Discipline" value="Option E" class="" title="" data-test="test">
<label for="">Option E</label>

＆＃13;

Answer 2

你去吧

label { display: block; }

<label for="">Yes
  <input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
</label>

<label for="">No
  <input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
</label>

使用CSS创建新行或换行符

2 个答案: