两个圆柱<li>布局

Question

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

http://jsfiddle.net/x4bLtt7b/

<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

产量