リストタグで横幅いっぱい(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・ガジェット