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>

HTML/CSSinline-block

Posted by とど