５つの要素を均等に並べたい

Question

下記のように本体が１８で両脇に余白が１％ずつで５つの合計が１００％になるようにしてみたのですが最後の要素が消えてしまします。
widthを17%にすると少し右寄りに表示されてしまいます。

均等にするにはどうしたら良いのでしょうか？

よろしくお願いします。

      <ul>
        <li><a href="A.html" target="_parent">A</a></li>
        <li><a href="B.html" target="_parent">B</a></li>
        <li><a href="C.html" target="_parent">C</a></li>
        <li><a href="D.html" target="_parent">D</a></li>
        <li><a href="E.html" target="_parent">E</a></li>
      </ul>

li {
  width: 18%;
  margin: 0 1%;
  display: inline-block;
  list-style-type: none;
  border: solid 2px #000000;
  border-radius: 3px;
}

Answer 1

inline-blockで横並びは空白に注意。flexのほうが簡単だとは思う。

      <ul>
        <li><a href="A.html" target="_parent">A</a>
        </li><li><a href="B.html" target="_parent">B</a>
        </li><li><a href="C.html" target="_parent">C</a>
        </li><li><a href="D.html" target="_parent">D</a>
        </li><li><a href="E.html" target="_parent">E</a></li>
      </ul>

li {
  width: 18%;
  margin: 0 1%;
  display: inline-block;
  list-style-type: none;
  border: solid 2px #000000;
  border-radius: 3px;
  box-sizing: border-box;/*ADD*/
}
```**動くサンプル：**[https://jsfiddle.net/mcohr2b4/](https://jsfiddle.net/mcohr2b4/)

---

【よこ並びのCSS。】
[http://lopan.jp/layout/](http://lopan.jp/layout/)

Comments

[sena14]

box-sizing: border-box;
を追加するだけで良いということでしょうか？

追加してみましたが改善されませんでした。

[kei344]

HTMLが変わっているのですが、そちらは確認されていますか？

[sena14]

すみません気づいていませんでした。

htmlも変更したところできました。

</li>を改行するとなぜ挙動が変わるのでしょうか？

[kei344]

改行は空白に置き換えられるから。

【空白や改行の取り扱い(white-space) - テキストプロパティ - スタイルシート入門】
http://www.webword.jp/cssguide/ref-text/index3.html
> 連続する複数の半角スペースやタブといったものは、1つの半角スペースに変換されます。また改行文字も半角スペースに変換されます。

【インライン要素で謎の隙間が出てくる問題 - Qiita】
https://qiita.com/nabettu/items/f34624d9094276d05e70

[sena14]

なるほど。
ありがとうございます。