基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。
その際1つ1つの要素に対して%(パーセント)指定をするが、1pxのボーダーを要素の間にいれようと思うと、
これがなかなかうまくいかない。。。
そんな時はtable-layout:fixedとtable-cellを使うとうまくいく。
こちらがCSS
ul { display: table; table-layout: fixed; width: 100%; } li { display: table-cell; background: #ccc; text-align: center; height: 50px; vertical-align: middle; } li:nth-child(2) { border-left: 1px solid #000; border-right: 1px solid #000; }
こちらはHTML
<ul> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>