html - htmlボタンアンカー表示ブロック

Question

アンカータグは、コンテンツに応じて自動的にサイズ変更されません。次の例を参照してください。

http://jsfiddle.net/XmnnY/

displayinlineまたはdisplayinline-blockを使用できることは知っていますが、アンカータグが内側のhtmlサイズ（この場合はテキスト）に応じて幅を自動的に設定する必要があります。

手伝ってくれてありがとう！

Answer 1

スタイルを指定したためdisplay: block、使用可能な幅全体が想定されます。

ハードwidthを設定するか、表示を に変更してinline-blockください。

inline-block変更すると、必要な他のものが壊れる可能性がある理由はありません.JSを使用して動的に幅を変更するか、それによって生じる問題を修正してください.

Answer 2

float:left/right (可能であれば) と clear:both を次のアイテムに使用するか、

inline-block を使用しますが、すべての空白と改行を削除します。これは、inline-block が内部 HTML のすべてのスペースを表示するためです。

<a href="#" style="display:block;float:left;">
    <img src="button.gif" />
</a>
<div style="clear:both">next element</div>

大丈夫ですが、

<a href="#" style="display:inline-block;"><img src="button.gif" /></a>

タグ内のすべてのリターンとスペースを削除したことに注意してください

フロート: http://jsfiddle.net/XmnnY/18/ InlineBlock: http://jsfiddle.net/XmnnY/16/