html - 列表组元素中水平对齐的 div

Question

我正在使用 Bootstrap 列表组元素来显示我的一些数据。我正在尝试在内部对齐几个 div，但到目前为止没有运气(我已经尝试了我可以在 SO 上找到的大部分建议，但没有运气)

这是我想要实现的:

这是我目前所拥有的和 corresponding code :

问题

我无法将上面结果中的文本拉到右侧(我不想给图标的 div 硬编码高度)，它总是在图标下方.下面是我的 html:

<div class="container">
   <div class="list-group" style="margin-top:50px;">
      <a href="#" class="list-group-item">
         <div class="row">
            <div class="pull-left" style="margin-left: 10px; margin-right: 10px;width:20px;">
               <i class="fa-star blue" title="Unfavorite" style="font-size: 24px;">
               </i>
            </div>
            <div>
               <h4 class="list-group-item-heading">Test project</h4>
               <div class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div>
            </div>
         </div>
      </a>
   </div>
</div>

我做错了什么？

Answer 1

EDITED JSFiddle demo

给你。以下是我所做的更改:

HTML

                <div class="row">
                    <div class="custom">
                        <i class="fa-star blue" title="Unfavorite" style="font-size: 24px;">
                        </i>
                    </div>
                    <div>
                        <h4 class="list-group-item-heading puller">Test project</h4>
                        <div class=" case1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div>
                    </div>
                </div>

向包装图标的 div 添加了一个类 custom。在标题中添加了 puller 类。在文本中添加了类 case1。

这是 CSS:

  .row {
    padding:10px;
}
.custom {
    display: inline-block;
    float: left;
    width: 35px;
     text-align: center; /* fixed the icon hovering to the left */
}
.case1 {
    padding-left: 55px;
    float: right;
    text-align: justify;
}
.puller {
    padding-left: 20px;
    display: inline-block;
}

它有点笨拙，但它确实有效(它甚至不会影响响应能力)。尽管我见过人们用更少的资源来解决问题。

希望对您有所帮助!

p.s 我已经编辑了代码。我错过了添加文本对齐以使图标看起来不错!