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