Question

以下是我所做的，我提取了重要部分：http://jsfiddle.net/P9Ftp/3/

我的问题是如果项目包含太多文本，它将换行到第二行。如果空间变得太小而只是悬停，它会增长以便正确显示文本但是一旦鼠标离开该字段就不会缩小。

通过增加左边距但不允许更多空间，文本换行：

<div id="list">
    <section>
        <div class="pre"></div>
        <div class="content">asdf asdfadsf asdfa sdf adsfadsf asdf a</div>
        <div class="post"></div>
    </section>
</div>

关键的CSS部分：

section:hover .content {
    margin-left: 32px;
}

这是预期的行为/我该怎么做才能避免这种情况？

提前多多感谢！

更新：似乎是Chrome问题。我们将不胜感激。

Answer 1

解决方案可以是将display: block;添加到section（或其他任何显示样式，例如inline-block）这会略微改变外观，但也许您可以使用其他规则来获得所需的结果。

一般情况下，我认为将display: flex;添加到所有元素（body *规则）过于宽泛，可能会导致意外结果。

Chrome上的小提琴：http://jsfiddle.net/P9Ftp/4/

由于其内容但不缩小，Flex div在悬停时垂直增长

1 个答案: