Question

我有3个单选按钮，它们旁边有3个标签，其中2个具有相同的字符长度，因此它们彼此对齐，但是中间的一个比它们更长，所以它与其他2个不对齐

这里是fiddle。

代码：

.wrapper{
  text-align: center;
  vertical-align: middle
}

.radio-wrapper{
  text-align: center;
  margin-bottom: 2%;
}

.radio{
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0;
    display: inline-block !important;
    zoom: 1;
    vertical-align: middle;
}

.radio span{
    zoom: 1;
    text-align: center;
    vertical-align: middle;
}

.radio input[type=radio]{
    position: absolute;
    margin-left: -20px
}

.radio input{
  border: none;
  background: none;
  display: inline-block;
  zoom: 1;
  text-align: center;
  width: 18px;
  height: 18px;
}

input[type=radio] {
    margin: 4px 0 0;
    line-height: normal;
}

label{
  margin-bottom: 3px;
  vertical-align: sub;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  cursor: pointer;
  text-align: left;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="center-block wrapper">
    <div class="radio-wrapper">
      <div class="radio" id="uniform-trans-1">
        <span>
          <input type="radio" name="transaction" id="trans-1" value="0">
        </span>
      </div> <!-- .radio -->
      <label for="trans-1">Faster than I expected?</label>
    </div> <!-- .radio-wrapper -->
    <div class="radio-wrapper">
      <div class="radio" id="uniform-trans-2">
        <span>
          <input type="radio" name="transaction" id="trans-2" value="1">
        </span>
      </div> <!-- .radio -->
      <label for="trans-2">About the time I expected?</label>
    </div> <!-- .radio-wrapper -->
    <div class="radio-wrapper">  
      <div class="radio" id="uniform-trans-3">
        <span>
          <input type="radio" name="transaction" id="trans-3" value="2">
        </span>
      </div> <!-- .radio -->
      <label for="trans-3">Longer than I expected?</label>
    </div> <!-- .radio-wrapper -->
  </div> <!-- .wrapper -->
</div> <!-- .container -->

如何将3个输入相互对齐，以使3个输入在彼此下方对齐，无论它们旁边的标签文本长度如何？

Answer 1

我看到您正在使用引导程序3.3.7。因此，我编辑了您的html以使其合规。然后，我为演示删除了不必要的CSS，并添加了display: table !important以覆盖默认的引导行为，该行为使我们可以折叠多余的空间并使容器居中。

http://jsfiddle.net/xquj471a/75/

CSS：

.center-block{display: table !important;}

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="center-block">
    <div class="radio">
      <label for="trans-1">
        <input type="radio" name="transaction" id="trans-1" value="0">
        Faster than I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-2">
        <input type="radio" name="transaction" id="trans-2" value="1">
        About the time I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-3">
        <input type="radio" name="transaction" id="trans-3" value="2">
        About the time I expected?
      </label>
    </div>
  </div>
</div>

Answer 2

.radio-wrapper{
  margin-bottom: 2%;
  margin-left: 45%;
}

.radio{
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0;
    display: inline-block !important;
    zoom: 1;
    vertical-align: middle;
}

.radio span{
    zoom: 1;
    text-align: center;
    vertical-align: middle;
}

.radio input[type=radio]{
    position: absolute;
    margin-left: -20px
}

尝试使用此CSS代码。还要删除名为“ .wrapper”的css标记。

Answer 3

我检查了您的代码，发现您没有使用您真正需要的bootstrap类。根据下面的代码，“ row”和“ col-md- *”类可以为您提供帮助：（替换HTML代码并删除您编写的其他类）

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-1">
    <span>
      <input type="radio" name="transaction" id="trans-1" value="0">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-1">Faster than I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-2">
    <span>
      <input type="radio" name="transaction" id="trans-2" value="1">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-2">About the time I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-3">
    <span>
      <input type="radio" name="transaction" id="trans-3" value="2">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-3">Longer than I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

有关上述类的更多说明：

“行”： “ row”类用于了解我们要使用“ col-md- *”类划分内容的浏览器
“ col-md- ”：当我们使用“行”时，“ col-md-”末尾的数字总和不应超过12。实际上，每个“行”都有12个部分，我们可以将其归因于不同的部分内容（div标签）通过“ col-md- *”类。

bootstrap grid中的更多信息...

祝你好运！

不管文本长度如何，将单选按钮居中对齐

3 个答案: