Question

我正在使用Bootstrap list group元素来显示我的一些数据。我试图在里面调整几个div，但到目前为止没有运气（我已经尝试了大部分建议，我可以在这里找到SO，没有运气）

这是我想要实现的目标： enter image description here

这是我到目前为止所拥有的corresponding code： enter image description here

问题

我无法将上面结果中的文字拉到右侧（我不想给图标的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我编辑了代码。我错过了添加文字对齐，以便图标看起来不错！

列表组项中的水平对齐的div

1 个答案: