福井県のweb制作は有限会社ハートブレーン
14.06.20

横幅を可変にして左右に広げたい

例えば、ヘッダーメニューで 、メニューが今後増えるかもしれない時は
二段よりも横に広げたい場合が多いのではないでしょうか。

こんな画像アップするとまた仕事来なくなるって怒られるかな

こんな感じで、横幅を可変にできたら見栄えが良いですよね。

そういう場合ですが、親要素を更に外側に入れると
設定できるようになるようです。

[code]
<div class="box">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</div>
[/code]
[code]
div.box { text-align: center; }
div.box ul { display: inline-block; }
[/code]

これで親要素の影響を受けて、中央に配置されるようです。

マージンとかパディングの左右を auto にしても意味がないのだと
1つ賢くなったNでした。

【ハートブレーン】https://blog.heart-kokoro.net/

【ハートブレーン】https://heartbrain.net
最後までご覧いただき、ありがとうございました。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。


Webサイト・CGIランキング

メールでのお問合せ・お見積りはコチラ
TOP