css - 单选/复选框自定义背景和垂直对齐

Question

我在使用自定义背景的单选按钮/复选框时遇到了问题。我在这里设计了它们的样式:Quick Tip: Easy CSS3 Checkboxes and Radio Buttons .主要部分是input在label标签后面，我题目的其他方案建议input在label里面。

<li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked">
  <label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </label>
</li>

这是标准的 Woocommerce 结账送货方式选项。这是它的样子:JSFiddle

它在宽屏设备上看起来很棒，但在移动设备上，标签固定在 2 行上，所以我需要将复选框图像放在 <li> 的中心.我尝试应用垂直对齐，但它不以整体为中心 <li>元素。也许有人遇到过这个问题？

应该是这样

ul#shipping_method {
    width: 50%;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#shipping_method li {
    border-bottom: 1px solid #d3ced2;
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

ul#shipping_method li input {
  display: none;
}

ul#shipping_method li span {
    font-weight: normal;
    text-transform: none;
    font-size: 13px;
}

ul#shipping_method li input + label:before {
    border-radius: 100%;
    margin-top: -2px;
}

ul#shipping_method li input + label:before {
    background-color: #fff;
    border: 1px solid #000;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: '';
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
}

ul#shipping_method li input:checked + label:before {
    background: url(http://s32.postimg.org/9rfrl1wlh/radio_checked.png) -1px;
}

<form>
<ul id="shipping_method">
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked">
    <label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method">
    <label for="shipping_method_0_flat_rate">DHL Express - <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </label>									
    </li>
  </ul>
</form>

Answer 1

尝试在表格中包含单选按钮和标签作为列元素，

<li>
 <table>
   <tr>
     <td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked"></td>
    <td><label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </label></td>
  </tr>
</table>
</li>

此外，您可能需要为单选按钮编辑 css。