Question

我正在尝试将自定义单选按钮与label元素旁边的列对齐，该元素包含多个span个。使用默认单选按钮很容易实现，但由于自定义样式应用于label:before，因此行为不一样。

<div class="sp-package-show">
  <input type="radio" name="" value="">
  <label>
    <span>Title</span>
    <span>Date</span>
  </label>
</div>

[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

label {
    cursor: pointer;
}

[type="radio"] + label {
    display: block;
    margin-left: 1px;
    vertical-align: middle;
}

[type="radio"] + label:before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: inherit;
    border-radius: 1em;
    // border: 0.15em solid $gray;
    box-shadow: 0 0 0 1px gray;
    margin-right: 0.75em;
}

[type="radio"]:checked + label:before {
    box-shadow: 0 0 0 0.05em gray;
    background-color: gray;
}

演示：https://codepen.io/ourcore/pen/mwRdbx

Answer 1

您可以制作label display: flex，然后将span换成另一个元素，以便label的弹性子元素为:before元素以及包裹span的元素。这将把它们放在相邻的列中。要使跨度在自己的行上，请使用display: block。

[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

label {
  cursor: pointer;
}

[type="radio"] + label {
  margin-left: 1px;
  display: flex;
}

[type="radio"] + label:before {
  content: '';
  width: 1.1em;
  height: 1.1em;
  border-radius: 1em;
  box-shadow: 0 0 0 1px gray;
  margin-right: 0.75em;
}

[type="radio"]:checked + label:before {
  box-shadow: 0 0 0 0.05em gray;
  background-color: gray;
}

span {
  display: block;
}

<input type="radio" name="" value="">
<label>
<div class="meta">  <span>Title</span>
  <span>Date</span>
  <span>Date</span>
  <span>Date</span>
  <span>Date</span>
  <span>Date</span>
  <span>Date</span>
  </div>
</label>

将自定义单选按钮和标签对齐为列

1 个答案: