javascript - 鼠标事件和 block 元素

Question

在我的文档中，我有一些带有 text-align: center 的 div :

<div>bla bla</div>
<div>bla bla bla bla</div>
<div>bla bla bla</div>

问题是虽然里面的内容可能不大，但 width: 100%的 div 可能使它们比内容更宽。鼠标事件捕获在所有图示区域中:

我在 JavaScript 中创建了自己的自定义工具提示，当鼠标离内容的左侧或右侧太远时显示它看起来根本不正确。

相反，我希望工具提示仅在它悬停在 div 的内容上时出现，或者至少让它看起来像这样:

设置display的 div 到 inline-block确实将它们缩小到内容的宽度，但它也使所有 div 出现在同一行中。
有什么方法可以在不使用 display: inline 的情况下实现我想要的吗？并插入 <br>在所有的 div 之间？这看起来根本不像是一个方便的解决方案。

编辑: 正如评论中所建议的，另一种可能的解决方案是将每个 div 的内容包装在 span 中。元素并将鼠标事件添加到其中，但这听起来也不是一个方便的解决方案，尤其是因为 div 的内容可能会以编程方式更改。

Answer 1

将显示类型设置为表格，同时将边距设置为 0 自动将完成您的需要。

div {
    display: table;
    margin: 0 auto;
}

您也不再需要 text-align: center 来工作。 http://jsfiddle.net/NEqvD/