html - 右浮动的 CSS 对齐问题

Question

我正在使用 bootstrap toggle在我的元素中，它工作得非常好，但是当我试图将切换 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>

这就是我希望的样子(请不要介意图标):

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>