例えばこんなHTMLを横並びにする場合、 <div class="list-box"> <ul> <li></li> <li></li> <li></li> </ul> </div>CSSはこのようになるでしょう。divタグには横幅を指定し、ulタグには横幅を指定しないようにします。 .list-box { overflow: hidden; *zoom: 1; width: 320px; } .list-box ul { margin: 0 -10px 0 0; //ネガティブマージン padding: 0; } .list-box li { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; background: #000006; }この方法を使えば「marginを0にするクラスを用意して端っこの要素のみに付ける
![要素の横並びをリキッドレイアウト(%単位)で、ネガティブマージンを使って実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ce1b0bb15c48208447c39f470c4326da5e14f25/height=288;version=1;width=512/https%3A%2F%2Fincrement-log.com%2Fwp-content%2Fuploads%2F2014%2F08%2Fcss-list-layout-negative-margin-01.png)