html - 当内部 div 包含开始换行的文本时，为什么将 div 元素推到 anchor 下方？

Question

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

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

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

这是我的 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;
}

预览

fiddle :http://jsfiddle.net/praveenscience/qepwV/7/