html - 证明两列布局(跨度)

Question

fiddle :https://jsfiddle.net/burz4g8s/4/

我的 HTML 包含多行双按钮对。服务器端应用程序在 JSP 循环中输出按钮，所以我无法控制各个按钮——我不能使用 display: table-cell; 将每个按钮放在自己的单元格中并将它们对齐，或将它们放在不同的容器中；只能在循环中使用通用容器。

我需要对齐它们，此外，Col.2 可以变大以容纳可能出现在那里的较大值。第 1 列可以更短。但目标是单选按钮应该对齐。

有没有简单的 CSS 解决方案？

Answer 1

如果你可以设置一个<br/>在表单的开头，您可以使用一些样式来完成此操作。直接邻居 ( + ) 和直接后代 ( > ) 派上用场。

label {
  color: white;
}

span > input + label {
  background: red;
  width: 300px;
  display: inline-block;
}

br + span + span > input + label {
  background-color: blue;
  width: 100px;
  display: inline-block;
}

<br/>
<span>
  Question 1
</span>
<span>
  <input type="radio" name="Q1" id="Q1Yes" value="Yes"/><label for="Q1Yes">Yes</label>
</span>
<span>
  <input type="radio" name="Q1" id="Q1Yes" value="No"/><label for="Q1No">No</label>
</span>
<br/>
<span>
  Question 2
</span>
<span>
  <input type="radio" name="Q2" id="Q2Option1" value="Yes"/><label for="Q2Option1">Short Option</label>
</span>
<span>
  <input type="radio" name="Q2" id="Q2Option2" value="No"/><label for="Q2Option2">Very Long Option String Extends to the Right</label>
</span>
<br/>
<span>
  Question 3
</span>
<span>
  <input type="radio" name="Q3" id="Q3Option1" value="True"/><label for="Q3Option1">True</label>
</span>
<span>
  <input type="radio" name="Q3" id="Q3Option2" value="False"/><label for="Q3Option1">False</label>
</span>