inline-blockを指定しているのに横に並ばない時
例として、下記のような設定をしているにも関わらず、
横に並ばない場合がある。
display: inline-block;
box-sizing: border-box;
width: 50%;
空白・改行が原因の場合が多く、letter-spacing を設定することで解消できる。
<html>
<head>
<style>
ul{
list-style: none;
padding: initial;
width: 100%;
letter-spacing: -1em;
}
li{
display: inline-block;
box-sizing: border-box;
width: 50%;
letter-spacing: 0em;
}
</style>
</head>
<body>
<ul>
<li>title1</li>
<li>data1</li>
<li>title2</li>
<li>data2</li>
<li>title3</li>
<li>data3</li>
<li>title4</li>
<li>data4</li>
</ul>
</body>
</html>