如何用 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>

后来我给每个里加了图片

<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;">

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

How to do 2 column in ul tag with two elements in li

html

css