Question

我想我可能会遗漏一些基本的东西。已经使用了几个小时，无法使其正常工作。

<div class="customerInfo">
<form class="form-style">
    <ul>
        <li>
            <label for="field1">field1</label>
            <input type="text" name="field1" maxlength="100"> <span>field1 info</span>

        </li>
        <li>
            <label for="field2">field2</label>
            <input type="text" name="field2" maxlength="100"> <span>field2 info</span>

        </li>
        <li>
            <label for="field3">field3</label>
            <input type="text" name="field3" maxlength="100"> <span>field3 info</span>

        </li>
        <li>
            <label for="field4">field4</label>
            <input type="text" name="field4" maxlength="100"> <span>field4 info</span>

        </li>
        <li>
            <label for="field5">field5</label>
            <input type="text" name="field5" maxlength="100"> <span>field5 info</span>

        </li>
    </ul>
</form>

我只需要布局为两列，即field1 / field2对应位于同一行（彼此相邻）。 field3 / field4对相同，依此类推。

开始时似乎很简单，但我还是无法让它工作。欢迎任何反馈。

由于

Answer 1

常规CSS方法：

如果您需要完整的浏览器支持，请使用此方法，否则请切换到flexbox。设置列表的宽度并显示为内联块

.form-style li {
  border: 1px solid #dddddd;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 5px;
  padding: 9px;
  width: 40%;
}

JSFiddle

Flexbox方法：

这是更好的，但只有现代浏览器支持。

.form-style ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

JSFiddle

<强>输出

Output 2 column li

Answer 2

你可以这样做：

.form-style li {
    display: inline-block;
    width: 40%;
}

根据需要调整宽度设置。

FIDDLE：https://jsfiddle.net/lmgonzalves/x4bLtt7b/3/

两个圆柱<li>布局

2 个答案: