Question

小提琴：https://jsfiddle.net/burz4g8s/4/

我的HTML包含2对按钮对。服务器端应用程序在JSP循环中输出按钮，因此我无法控制单个按钮 - 我无法使用display: table-cell;将每个按钮放在自己的单元格中并对齐它们，或者放置它们在不同的容器中;只有一个通用容器才能在循环中使用。

我需要对齐它们，此外，可以将第2列放大以适应可能出现的较大值。第1栏可以更短。但目标是单选按钮应排成一行。

有一个简单的CSS解决方案吗？感谢

Answer 1

你可以像这样拉进css吗？

span {
  display: table-cell;
  height: 2em;
  vertical-align: top;
  width: 8em;
}

span:nth-child(4n-1) {
  width: 30em;
}

span:nth-child(4n) {
  clear: left;
}

input[type=radio] {
  display: block;
  float: left;
}

label{
  padding-left: 1.5em;
  display: block;
}

https://jsfiddle.net/burz4g8s/7/

Answer 2

如果您可以在表单开头设置<br/>，则可以使用某些样式执行此操作。直接邻居（+）和直接后裔（>）派上用场。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

证明2列布局（跨度）

2 个答案: