ul{
    list-style-type: none;
}
.li1{
    float: left; width: 50px; background-color: aqua;
}
.li2{
    display: inline-block; width: 50px; background-color: aqua;
}

<!-- float解决 -->
<ul>
    <li class="li1">1</li><li class="li1">2</li><li class="li1">3</li>
</ul><br>

<!-- li不换行解决 -->
<ul>
    <li class="li2">1</li><li class="li2">2</li><li class="li2">3</li><li class="li2">4</li>
</ul>

<!-- inline-block解决不了 -->
<ul>
    <li class="li2">1</li>
    <li class="li2">2</li>
    <li class="li2">3</li>
    <li class="li2">4</li>
</ul>