今日会社の後輩くんから「display: inline-blockを使ってliを横並びにしてるんですけど、隙間ができてしまうんですが…」との質問。 彼は最近HTMLを学び始めたばかりなんですが、自分も昔これでmarginとかいじくり倒して悩んだことがあり、みんな同じ壁にぶち当たるもんなんだなぁとしみじみ…。 display: inline-blockでliを横並びに <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul> li { display: inline-block; /* IE 6/7 */ /display: inline; /zoom: 1; width: 100px; height: 100px; border: 1px solid #ccc; list-style: none; text-align: center; li
![display: inline-block の隙間を詰める方法 | Soraxism](https://cdn-ak-scissors.b.st-hatena.com/image/square/be4b0c88eadaa0bf6643d72c7a370875841149c4/height=288;version=1;width=512/http%3A%2F%2Fsoraxism.com%2Fsoraxism%2Fblog%2Fwp-content%2Fuploads%2F2014%2F07%2Fcss.jpg)