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

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 包裹在另一个元素中，这样 的 flex children >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>