html - Div which contains text does not take the necessary width

Question

Following my code:

<div style="min-width: 150px; max-width: 200px; margin: 0 auto; border: 1px solid black;">test</div>

The 150px enough to contain all the text, instead the div takes the maximum size, in this case 200px. How to solve without float?

Answer 1

に設定display: inline-block;するとdiv、152px (最小幅 + 境界線) になります。

このフィドルを参照してください。

元の投稿と同じマージンでフィドルを更新しました。

Answer 2

div はブロック タイプの要素であるため、自動的に 100% の幅になります。代わりにコンテンツに合わせて幅を調整したい場合は、この属性をスタイルタグに追加してみてください: display: inline-block;.