Question

我正在设计与第三方系统的集成，并需要格式化一些单选按钮。供应商为我们提供了这个HTML：

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

我需要它像这样渲染它：

我试过并失败了，使用flexbox来实现这个目标：

＆＃13;

span.radiocontainer {
  float: none;
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: left;
}

span.radiocontainer > label.selected.radiolabel {
  box-shadow: none;
  width: 50%;
  border: 0px;
}

span.radiocontainer > input {
  width: 50%;
}

＆＃13;

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

＆＃13;

有没有办法让我格式化左边的单选按钮？或者我需要改变我的设计吗？

我无法更改HTML，因为它来自供应商，CSS是我们唯一可以自定义的。

Answer 1

您可以通过每个输入和标签的硬编码顺序将输入移动到左侧。

＆＃13;

.radiocontainer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.radiocontainer input,
.radiocontainer label {
  width: 50%;
  margin: 0;
}

input:nth-of-type(1) {order: 1}
input:nth-of-type(2) {order: 3}
label:nth-of-type(1) {order: 2}
label:nth-of-type(2) {order: 4}

＆＃13;

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

＆＃13;

Answer 2

CSS Grid

这里最合适的方法是CSS Grid Layout。下面的方法使用现代语法，但没有IE / Edge支持。

.radiocontainer {
  display: inline-grid;
  /* tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later */
  grid-auto-flow: dense;
  align-items: center;
}

.radiocontainer label {
  grid-column: 2;
}

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

如果您还需要IE和Edge支持，则必须使用旧语法。 IE / Edge实现中没有自动放置行为，因此您必须手动指定每个项目（第一个除外）的对齐方式。如果您没有放置项目，它们将叠加在IE / Edge中网格的第一个单元格中。这适用于IE10 +：

.radiocontainer {
  display: -ms-inline-grid;
  display: inline-grid;
  align-items: center;
}

.radiocontainer label {
  display: block;
}

input:nth-of-type(2) {
  -ms-grid-row: 2;
  grid-row: 2;
}

label:nth-of-type(1) {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 2;
  grid-column: 2;
}

label:nth-of-type(2) {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  grid-column: 2;
}

input:nth-of-type(3) {
  -ms-grid-row: 3;
  grid-row: 3;
}

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
    <input class="selector" id="asdf" name="Gender" type="radio" value="1">
</span>

Flexbox的

我会改进@NenadVracar answer：

我们可以删除为每件商品设置order的需求。我们可以为容器设置flex-direction: row-reverse。
设置50%和input的百分比（label）是个坏主意。增加/减少标签长度会扭曲我们的单选按钮列表的外观。我们需要为单选按钮设置固定宽度。

.radiocontainer {
  display: inline-flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
}

.radiocontainer input,
.radiocontainer label {
  margin: 0;
}

.radiocontainer input {
  width: 20px;
}

.radiocontainer label {
  width: calc(100% - 20px);
}

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

CSS Floats

这种方式即使在IE9中也可以使用，但是居中的单选按钮不起作用。

如果看到@TejasviKarne，您会发现.radiocontainer的宽度不考虑label的宽度。如果你关心它，你可以这样做：

.radiocontainer {
  display: inline-block; /* Take width of content */
}

.radiocontainer input,
.radiocontainer label {
  margin: 0;
}

.radiocontainer label {
  width: calc(100% - 15px);
  float: right;
}

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

Answer 3

我在黑暗中拍摄，但是注释掉你的所有代码并尝试这个

label{float:right; width:calc(100% - 30px);}

.radiocontainer label{float:right; width:calc(100% - 30px);}

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

我删除了您提供的小提琴中的所有原始样式，并添加了这些样式。他们按照你的意愿做了调整。但是，您的样式表可能包含其他样式，例如line-height和margin。我认为你可以通过一些调整来获得你想要的对齐方式。如果它不起作用，您可以恢复到您的代码并从那里继续。请告诉我它是怎么回事。

如何对齐单选按钮和标签？

3 个答案:

CSS Grid

Flexbox的

CSS Floats