當懸停時寬度自動不起作用

Question

我正在創建一個Web應用程序，我需要做一些設計調整。請檢查這一個http://jsfiddle.net/rkumarnirmal/5w3FG/9/

當我懸停時，它顯示在灰色邊框。我需要的是我想適應邊框以適應文本的寬度。我試圖設置寬度：自動但仍然不工作，顯示邊框到頁面寬度大小。

我該怎麼辦？

謝謝！

Answer 1

設置text-preview到inline-block的：

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

inline-block的將導致元件呈現彷彿直列而不是佔用所有可用的水平空間，但將允許您設置內部尺寸和填充爲一個塊元素會。

需要注意的是IE7不支持inline-block的，除非你強制hasLayout財產。最簡單的方法是使用zoom:1;。

Answer 2

width:auto上的div轉化爲width:100%因爲div是塊級元素。

如果你想擁有它的大小，你要麼需要使用更合適的內聯標籤像span或根據數據，定義列表（dl）的語義的文本。

您還可以將包裝div的display屬性更改爲inline或inline-block但這在語義上不正確。