html - 悬停时宽度自动不起作用

Question

我正在创建一个需要进行一些设计调整的 Web 应用程序。请检查这个http://jsfiddle.net/rkumarnirmal/5w3FG/9/

当我悬停时，它以灰色显示边框。我需要的是让边框适合文本的宽度。我尝试设置宽度：自动但仍然无法正常工作，将边框框显示为页面宽度大小。

我该怎么做？

谢谢！

Answer 1

设置text-preview为内联块：

#text-preview {
    display:inline-block;
    zoom:1; /* if you need IE7 support */
}

Inline-block 将导致元素呈现为内联而不是占用所有可用的水平空间，但允许您像块元素一样设置内部尺寸和填充。

hasLayout请注意，除非您强制使用该属性，否则 IE7 不支持 inline-block 。最简单的方法是使用zoom:1;.

Answer 2

width:autoon adiv转换为width:100%因为 adiv是块级元素。

如果你想让它的大小适合文本，你需要使用更合适的内联标记，如 aspan或根据数据的语义含义使用定义列表 ( dl)。

您还可以display将包装器的属性更改div为inlineor inline-block，但这在语义上不正确。