html - ホバー時に幅自動が機能しない

Question

デザインを微調整する必要があるWebアプリケーションを作成しています。こちらをチェックしてくださいhttp://jsfiddle.net/rkumarnirmal/5w3FG/9/

ホバーすると、境界線が灰色で表示されます。必要なのは、テキストの幅に合わせて境界線ボックスを合わせたいということです。width：autoを設定しようとしましたが、それでも機能せず、ページ幅のサイズにボーダーボックスが表示されます。

どうすればいいですか？

ありがとう！

score 2 · Accepted Answer

text-previewインラインブロックに設定:

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

inline-block を使用すると、利用可能な水平スペースをすべて占有するのではなく、要素がインラインのようにレンダリングされますが、ブロック要素のように内側の寸法とパディングを設定できます。

hasLayoutプロパティを強制しない限り、IE7 はインラインブロックをサポートしないことに注意してください。これを行う最も簡単な方法は、を使用することですzoom:1;。

score 0 · Accepted Answer

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

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

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

2 に答える 2