リストタグで横幅いっぱい(100%)を均等分割
2013.10.09
思い切り備忘録です。
横置きのナビゲーションバーを設置する際などでリストタグを使う場合に、端から端まで均等に分けたい。
そんな時は?
ulタグにdisplay:table、liタグにdisplay:table-cellを指定して上げます。
こんな感じ。
nav.sub ul{ list-style-type: none; width: 100%; display: table; table-layout: fixed; margin: 0px; padding: 0px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } nav.sub ul li { font-family: "メイリオ", "ヒラギノ丸ゴ ProN W4", Verdana, sans-serif; font-size: 90%; color: #FFFFFF; background-color: #666666; padding: 5px; border-right: 1px solid #CCCCCC; display: table-cell; }
Mac・PC・ガジェット