CSS浮动对齐问题与右浮动

Question

我在项目中使用Bootstrap切换开关，它的效果非常好，但当我试图将切换div对齐到右侧时，文本（在左侧）和div不再对齐。

我阅读了有关此问题的内容，并发现clearfix类可以在这里提供帮助，它确实解决了一些问题，但仍然不像应该的那样。 JSFiddle

<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             Data source 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

这是我希望它看起来的样子（图标不要紧）：

- LiranBo

---

这是与您的行高有关的问题。您的默认行高是字母大小的像素数，因为您的datatoggle比文本行高要大得多，所以您需要正确设置它。您的文本为14像素，而datatoggle为32，因此理想的行高为2.3 / 2.4。 - Dorvalla

我可以问一下，如果我不使用float right，为什么这不是一个问题呢？ - LiranBo

不要在 h5 标签内嵌套 div。 - m4n0

它确实起作用了，谢谢，我在这上面浪费了很多时间...@Manoj Kumar - 感谢您的提示，这段代码是自动生成的，所以我只需替换h5即可。 - LiranBo

Answer 1

你应该在“数据源”之外创建一个元素，并为其添加 line-height: 32px; ：

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             <span style="line-height: 32px;">Data source</span> 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

- om_jaipur