jquery - 水平对齐单选按钮(在移动设备中)？

我一直试图在水平布局中放置一组复选框。假设只在移动设备中使用它很好，而且很简单，就像使用媒体查询的不同css一样。我在网上试了很多例子，比如float，display inline bock等等，似乎都不适合我，或者至少我的代码是这样的。有什么建议吗？。我更喜欢使用css解决方案，因为我只在移动设备上使用此设置。

.dcenter-filters label input[type="radio"]{
  display: inline-block !important;
  float: left;
}

<div class="dcenter-filters">
  <div class="radio">
	<label>
      <input type="radio" name="gender" checked="checked" >MSSP
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Legal
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Policies & Procedures
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Performance Measures
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Forms
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="gender">Eligibility
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Benefits
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Marketing
    </label>
  </div>
</div>

最佳答案

您需要以正确的方式瞄准所需的元素，如：

.dcenter-filters > .radio {
  display: inline-block;
}

<div class="dcenter-filters">
  <div class="radio">
    <label><input type="radio" name="gender" checked="checked">MSSP</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Legal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Policies & Procedures</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Performance Measures</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Forms</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Eligibility</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Benefits</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Marketing</label>
  </div>
</div>