どうも、案外知られていないようなので。
中のテキストに応じて幅が変更する display:inline-block; みたいなものを再現する CSS を紹介します。
ここがなりで広がります。
こんな風に伸ばしても大丈夫です。
縮めても。
ってな感じで。
要はなりで広げたい要素に float をかけて、親要素に clearfix をかけるだけです。
- HTML
<div class="unit"> <p class="nari">text</p> </div>
- CSS
.unit{ zoom:1; } .unit:after{ content:''; display:block; clear:both; } .nari{ float:left; }
以上、小技でした。