悬停时宽度自动不起作用

Question

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

当我悬停时，它会显示灰色的边框。我需要的是我想要适合边框来适应文本的宽度。我试图设置宽度：auto但仍然不起作用，显示页面宽度大小的边框。

我该怎么做？

谢谢！

Answer 1

将text-preview设置为内联块：

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

内联块将使元素呈现为内联而不是占用所有可用的水平空间，但是可以将内部尺寸和填充设置为块元素。

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

Answer 2

width:auto上的

div会转换为width:100%，因为div是块级元素。

如果你想让文字大小，你需要使用更合适的内联标签，如span，或者根据数据的语义，定义清单（{{1} }）。

您还可以将包装器dl的{​​{1}}属性更改为display或div，但这在语义上并不正确。