gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

516bookmark

display:inline-blockでできる隙間をなくす

1. inline-blockのliを横並びにする

html
<ul>
<li><a href="#">A</a><li><li><a href="#">B</a><li><li><a href="#">C</a><li>
</ul>

2. liの閉じるタグを無くす

html
<ul>
<li><a href="#">A</a>
<li><a href="#">B</a>
<li><a href="#">C</a>
</ul>

3. ulのletter-spacingにマイナス値をつける

css
ul {letter-spacing:-0.5em;}
ul li {letter-spacing: normal;}

4. ulをfont-size:0;にする

css
ul {font-size: 0;}
ul li {font-size:14px;}