li 長さ指定

質問

こんにちは、
liタグなのですが、長さを固定にすることって出来ますでしょうか？
横並びにして、ナビにつかっているのですが
文字数で幅が変わるので、一定の長さで固定にしたいとおもいまして。

回答No.1

metametamu · ベストアンサー

cssのwidthとtext-align:center;を指定すれば可能です。

回答No.2

ORUKA1951

liは本来ブロック要素なので、そのままでは横並びできないはずです。文字数で伸縮すると言うことは、displayプロパティでinlineに指定しているのかな？
　displayの値をblockにしてfloatさせるなら、必ず幅を指定しているはずですし、displayの値をinline-blockにしているなら幅を指定してください。
　最近は、ウィンドウ/ディスプレイの幅がスマホから幅広ディスプレイと様々なので、リキッドデザインにすることが多いと思いますが、その場合は、ユーザー(特に視覚弱者)がフォントサイズを(大きく)変更する可能性があるので、余裕を見てサイズを指定するのが良いでしょう。min-widthで最小幅を指定して、ウィンドウ幅が小さい場合は２行になるようにしても良いでしょう。

[例]HTML4.01
<div class="nav">
　<ol>
　　<li><a href="/">Top</a></li>
　　<li><a href="/product">製品</a></li>
　　<li><a href="/recruit">募集</a></li>
　　<li><a href="/profile">会社案内</a></li>
　<ol>
</div>
[例]HTML5
<nav>
　<ol>
　　<li><a href="/">Top</a></li>
　　<li><a href="/product">製品</a></li>
　　<li><a href="/recruit">募集</a></li>
　　<li><a href="/profile">会社案内</a></li>
　<ol>
</nav>

[CSS] HTML4.01用 ★リキッドでスマホにも対応★
div.nav{width:80%;margin:0 auto;max-width:800px;}
div.nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
div.nav ol,div.nav ol li{margin:0;padding:0;}
div.nav ol li{display:inline-block;width:20%;min-width:5em;}
div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
div.nav ol li a:hover{background-color:yellow;}

[CSS]HTML5用
nav{width:80%;margin:0 auto;max-width:800px;}
nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
nav ol,div.nav ol li{margin:0;padding:0;}
nav ol li{display:inline-block;width:20%;min-width:5em;}
nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
nav ol li a:hover{background-color:yellow;}

★line-heightは高さの中心を合わせるため指定しています。