当内部 div 包含开始换行的文本时，为什么 div 元素会被推到锚点下？

Question

我有一个列表项，其中包含一个“抓取手柄”锚点和一个 div，其中包含一个包含文本的内部 div。当内部 div 中的文本达到容器宽度并开始包裹时，外部 div 被强制低于锚点。我希望无论有多少文本，外部 div 都不会被强制低于锚点，而是文本只是在空间内换行。

我有一个 jsFiddle here 有两个列表项，其中包含不同数量的文本来演示。

在下面 jsFiddle 的屏幕截图中，您可以看到第一个列表项中的“拖动句柄”锚点位于其自己的行中，由于描述文本长度，其余细节被向下推

这是我的html：

<ul class="sortable">
    <li>
        <span class="dragHandle"></span>
        <div class="itemContentContainer">
            <a href="/events/7708">Ticket Admin</a>
            <div>Every week there will be one shift of 2 people to help count the cash and sort the ticket orders</div>
            <div>Still needed: 16&nbsp;&nbsp;Helping: 0</div>
        </div>
    </li>
    <li>
        <span class="dragHandle"></span>
        <div class="itemContentContainer">
            <a href="/events/7309">Decorations - Nursery PM, Rbw B, Red</a>
            <div>Decorate the School grounds with bunting etc that you have made.</div>
            <div>Still needed: 10&nbsp;&nbsp;Helping: 0</div>
        </div>
    </li>
</ul>

和 CSS

ul.sortable {
    border-top: 1px solid #ddd;
    margin: 1em -19px 0;
    list-style: none;
}

ul.sortable > li:nth-child(odd) {
    background-color: #f9f9f9;
}

ul.sortable > li {
    border-bottom: 1px solid #ddd;
    padding: 0 0 0 19px;
    margin: 0;
    background-color: #ffffff;
}

li {
    line-height: 20px;
}

ul.sortable .dragHandle {
    display: inline-block;
    cursor: pointer;
    background: url('http://service.ptasocial.com/public/img/reorder-lines.png') no-repeat left center;
    width: 2em;
    height: 2em;
    margin-right: 1em;
    background-size: 100%;
}

ul.sortable .itemContentContainer {
    padding: 0.75em 0;
    display: inline-block;
}

a {
    color: #c63d13;
    text-decoration: none;
}

Answer 1

您已使用inline-block。这不是一个好习惯。最好的方法是使用positioning 并定位拖动处理程序，并给父级div 一些左填充。

所以你的 CSS 代码应该是：

ul.sortable .dragHandle {
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 15px;
    z-index: 1;
    cursor: pointer;
    background: url('http://service.ptasocial.com/public/img/reorder-lines.png') no-repeat left center;
    width: 2em;
    height: 2em;
    margin-right: 1em;
    background-size: 100%;
}

ul.sortable .itemContentContainer {
    padding: 0.75em 0 0.75em 35px;
    display: inline-block;
}

预览

小提琴：http://jsfiddle.net/praveenscience/qepwV/7/