Question

我有一个row div，其中包含一个名为horizontal-form的div，其中horizontal-form包含其他两个div，名为form-group，并在此form-group内我有另一个div，名为input-group，其中包含1个a标记和1个span文本。我想将这些跨度与最正确的位置对齐。我尝试使用class = pull-right，但随后它与正确的位置对齐但与最近的div进行比较，这里是input-group。任何人都可以告诉我如何将跨度与我希望的任何位置对齐，例如，在这里我想将其与div row或horizontal-form

相比较，将其对齐到正确的位置

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
   <div class="horizontal-form">
  <div class="form-group">
     <div class="input-group subQuestionsLabel" data-toggle="collapse" >
        <a href="javascript:">FirstItem</a>
        <span class="button">
        <button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
        </span>
     </div>
  </div>
  <div class="form-group">
     <div class="input-group subQuestionsLabel" data-toggle="collapse" >
        <a href="javascript:">SecondItem</a>
        <span class="button">
        <button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
        </span>
     </div>
  </div>
   </div>
</div>

Answer 1

这是因为"input-group"类，因为它在css中具有"display:table;"属性。

所以有两种方法可以解决这个问题。

删除此课程
将此class的css覆盖为"display:block"

Answer 2

你问的不是正确的方法，因为我在你的代码中看到，因为你使用的是bootstrap和bootstrap逻辑不会像这样工作。如果你需要任何你想要的span对齐，请不要将它放在div horizontal-form类和form-group类中。在这种情况下，如果我理解得恰到好处，只需将float: right;应用于span。

如何在许多包装的div中对齐元素

2 个答案: