html - 如何用 li 中的两个元素在 ul 标签中做 2 列

Question

我想在 ul 标签中有两列，每个输入都应该有图像。例如，以前我有这个，它很好

.res{
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

<ul class="res">
    <li>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
    <li>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
    <li>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
</ul>

后来我给每个li加了图片

<ul class="res">
    <li>
        <img src="images/item1.png" width="34px" height="34px"/>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
    <li>
        <img src="images/item2.png" width="34px" height="34px"/>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
    <li>
        <img src="images/item3.png" width="34px" height="34px"/>
        <input type="number" step="10" min="0" class="form-control" disabled="disabled" />
    </li>
</ul>

一切都出错了，这看起来像

image    input
input    image
image    input

我想

image input    image input
image input

Answer 1

所以只是一些东西like this ？

我只是把所有的 li 都漂浮到这个:

<li style="float:left;">