Question

我一直试图将一组复选框放在水平布局中。假设仅在移动设备中使用它很好并且使用媒体查询作为不同的css很简单。我在网上尝试了很多例子，如浮动，显示内联博克等。似乎没有对我有用或至少对我的代码有用。有小费吗？。我宁愿使用css解决方案，因为我只在移动设备上使用此设置。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以通过将此添加到CSS来轻松实现此目的：

.radio{
    float:left;
  }

这是一个小提琴：https://jsfiddle.net/9qtrbkc0/

Answer 2

更改div以跨越此内联元素：

＆＃13;

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

＆＃13;

Answer 3

您需要以正确的方式定位所需的元素，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

我认为您只需将<div>更改为<span>即可获得单选按钮。如果这是您正在寻找的答案，请告诉我。

<div>
    <span class="radio">
        <label><input type="radio" name="gender" checked="checked">MSSP</label>
    </span>
    <span class="radio">
        <label>
            <input type="radio" name="gender">Legal
        </label>
    </span>
</div>

水平对齐单选按钮（在移动设备中）？

4 个答案: