ホバリング時に幅自動が機能しない

Question

私はいくつかのデザインを微調整する必要があるウェブアプリケーションを作成しています。この1つを確認してくださいhttp://jsfiddle.net/rkumarnirmal/5w3FG/9/

私がカーソルを移動すると、境界線が灰色で表示されます。私が必要とするのは、テキストの幅に合わせて枠線を合わせたいと思うことです。私は幅を設定しようとしました：自動しかし、まだ動作していない、ページ幅のサイズに境界ボックスを表示します。

どうすればいいですか？

ありがとうございます！

インラインブロックする text-previewを設定し

Answer 1

：

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

インラインブロック要素は、インラインかのように、むしろ可能な水平スペースのすべてを占有するよりもレンダリングするようになりますが、意志はあなたが内側の寸法やパディングなどを設定することができますブロック要素があります。

IE7は、hasLayoutプロパティを強制しない限り、インラインブロックをサポートしません。これを行う最も簡単な方法はzoom:1;です。

Answer 2

width:autoオンdivは、divがブロックレベルの要素であるため、width:100%に変換されます。

テキストに合わせてサイズを変更する場合は、spanなどのより適切なインラインタグを使用するか、データの意味的意味に応じて定義リスト（dl）を使用する必要があります。

ラベラーdivのdisplayプロパティをinlineまたはinline-blockに変更することもできますが、それは意味的に正しいものではありません。