如何使多线单选按钮标签很好地排列？

Question

我有自动生成的HTML片段：

<label><input type="radio" name="question24_answer" value="A">A)&nbsp;
H<sub>0</sub>&#58; p = 0.0016<br/>H<sub>1</sub>&#58; p &lt; 0.0016</label>

这会产生以下结果：

我希望标签的两条线垂直对齐，以便它们看起来很好：

如果有必要，A)可以省略，但我不想：

Answer 1

理想情况下，您要进行的任何视觉更改都应使用CSS完成。

但是，如果必须使用没有内嵌样式的html，只需添加一些不间断的空格（&nbsp）即可实现此效果，还可添加<br>个标记

<label><input type="radio" name="question24_answer" value="A">A)<br>
    &nbsp;&nbsp;
H<sub>0</sub>&#58; p = 0.0016<br/>&nbsp;&nbsp;&nbsp;H<sub>1</sub>&#58; p &lt; 0.0016</label>

哪个应该给你这个：

或者，如果您想使用某些内嵌样式，您可以使用float属性并将第二组信息放在<div>标记（或您认为合适的任何语义标记）中：

<label style="float: left"><input type="radio" name="question24_answer" value="A">A)&nbsp;
<div style="float: right;">H<sub>0</sub>&#58; p = 0.0016<br/>H<sub>1</sub>&#58; p &lt; 0.0016</div></label>

哪个应该给你这个：

Answer 2

也许有一个清单？

＆＃13;

＆＃13;

<label><input type="radio" name="question24_answer" value="A">A)
<ul style="list-style: none; margin-top: 0;"><li>H<sub>0</sub>&#58; p = 0.0016</li><li>H<sub>1</sub>&#58; p &lt; 0.0016</li></label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

任何解决方案都需要能够自动完成。

我认为这将排除纯HTML解决方案，这是您的问题唯一的标记。因此，如果忽略了没有CSS或JavaScript标签这一事实的风险，我会立即建议使用JavaScript和一点CSS。

1. .querySelectorAll()将每个<br/> <label>的{​​{1}}收集到NodeList中
2. Array.prototype.map.call()在NodeList的每个项目上执行一个函数并返回一个新数组
3. insertAdjacentHTML()在NodeList中的每个<span>之后插入<br>
4. 此<span>的宽度为6.4ch; ch是一个度量单位，等于零的宽度。
5. 使用等宽字体并确保<input>继承字体。这些步骤有助于规范化字体可能导致的差异。
6. 为了完美，请使用vertical-align和line-height的组合，以便正确对齐单选按钮。

<强>段

var br = document.querySelectorAll('label br');

Array.prototype.map.call(br, function(obj) {
  return obj.insertAdjacentHTML('afterend', "<span class='ch'><span>")
});

body {
  font: 400 16px/1.5 Consolas;
}

input {
  vertical-align: -10%;
  line-height: 1;
  font: inherit;
}

.ch {
  display:inline-block;
  width: 6.4ch;
}

<label><input type="radio" name="question24_answer" value="A">A)&nbsp;
H<sub>0</sub>&#58; p = 0.0016<br/>H<sub>1</sub>&#58; p &lt; 0.0016</label>
<br/>
<label><input type="radio" name="question24_answer" value="B">B)&nbsp;
H<sub>26</sub>&#58; p = 0.04096<br/>CH<sub>2</sub>&#58; p &lt; 0.096</label>
<br/>
<label><input type="radio" name="question24_answer" value="C">C)&nbsp;
H<sub>89</sub>&#58; p = 0.00248966652<br/>H<sub>1</sub>&#58; p &lt; 0.0016</label>
<br/>
<label><input type="radio" name="question24_answer" value="D">D)&nbsp;
H<sub>0</sub>&#58; p = 0.1<br/>H<sub>652</sub>&#58; p &lt; 0.0016</label>