リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる – bl6.jp
リストを横並びにした際にli要素の幅を簡単に均等にすることができるdisplay:table-cellを使ってみました。毎回width指定をして調整するのが面倒だなと思っていたんですが、これを使えばとても簡単に均等にできますね。可変にも対応できるのでレスポンシブといった今後使う機会が増えてきそうな感じです。 [ads_center] 使い方 ulでナビゲーションを作る場合は、ulにはdisplay:table、liにはdisplay:table-cellを指定します。 HTML <nav class="global-navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Sitemap</a></li>
[ CSS ] display: table-cell って便利そう！
CSS の display: table-cell と言うプロパティーを最近知りまして、float を使わずにカラムレイアウト出来たり、縦方向の中央に要素を配置できたりして便利そうなのでサンプルを書いてみました！ – display: table-cell のサンプル どんな事が出来るのか？ ———————————————————————- HTML のソース <dl> <dt>見出し</dt> <dd>内容</dd> </dl> CSS のソース dl { display: table; width: 360px; border: 2px solid #ccc; } dt, dd { display: table-cell; padding: 0.5em 1em; vertical-align: middle; } dt { width: 20%; background-color: #
![[ CSS ] display: table-cell って便利そう！](https://cdn-ak-scissors.b.st-hatena.com/image/square/dcabe16bc58435f59db02fbd93af46344d34c3ef/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2017%2F02%2Fcss_1487924736.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
