Question

我有一个CSS样式的单选按钮，需要显示在<UL><LI>内。单选按钮旁边的提示具有可变长度和大小。

我知道如何同时获取自定义样式单选按钮以及在包含<LI>中间垂直对齐的提示文字？

我希望尽可能避免绝对位置，因为每个项目的内容会有所不同。我唯一真正的要求是包含提示文字的<DIV>仍为<DIV>项（而不是<SPAN>或<LABEL>。

此处的代码笔显示问题：https://codepen.io/anon/pen/KgzjpX

＆＃13;

/* Unselected List Item */

ul li {
  display: block;
  border-bottom: 1px dotted lightgray;
}
/* hide Default radio element */

ul li input[type=radio] {
  visibility: hidden;
}
ul li label {
  display: inline-block;
  padding-left: 20px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
}
/* Outer circle, unselected, not-hovered */

ul li .check {
  display: block;
  position: relative;
  border: 3px dotted purple;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
/* Outer circle, unselected, hovered */

ul li:hover .check {
  border: 3px solid green;
}
/* Inner circle */

ul li .check::before {
  display: block;
  position: relative;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  left: 5px;
  top: 5px;
  transition: background 0.1s linear;
  -webkit-transition: background 0.1s linear;
}
/* Outer circle, selected, unhovered */

input[type=radio]:checked ~ .check {
  border: 3px solid blue;
}
/* Inner circle, selected, unhovered */

input[type=radio]:checked ~ .check::before {
  background: black;
}

＆＃13;

<ul>
  <li>
    <span>
    <input type="radio" id="f-option" name="selector" checked="checked">
    <label for="f-option"><div>Item 1<br/>Second Line<br/>Third Line</div></label>
    <div class="check"></div>
    </span>
  </li>

  <li>
    <div>
      <input type="radio" id="s-option" name="selector">
      <label for="s-option">
        <div>Second Thing</div>
      </label>

      <div class="check">
        <div class=""></div>
      </div>
    </div>
  </li>

  <li>
    <div>
      <input type="radio" id="t-option" name="selector">
      <label for="t-option">
        <div>Nothing at all
          <br/>Some More stuff here</div>
      </label>

      <div class="check">
        <div class=""></div>
      </div>
    </div>
  </li>
</ul>

＆＃13;

Answer 1

我会将自定义支票div更改为display: inline block，然后在vertical-align: middle和label上设置div。

您必须在其容器中切换label和div的位置，才能在左侧显示div。

编辑：这是一个更新的笔，用于演示：https://codepen.io/anon/pen/rrZXab?editors=1100

在<li>中垂直对齐中心自定义单选框

1 个答案: