如何在CSS中模拟这种布局？

Question

我试图用列表项替换HTML表单（由表创建）以简化标记并启用某些项的动态可见性（因此我可以在不同页面中重用该控件）。基本上，我想设置容器div的最大高度，然后在该点之后将任何列表项包装到右列（使用IE9作为默认浏览器）。

我正在尝试以下CSS：

ul.test {float: left; width: 100%; margin: 0 0 1em 0;list-style: none;}
ul.test li {float: left; width: 49%;}

和HTML：

<div>
   <ul class="list2col">
    <li>
        <label>Project Name</label><input style="float:right;"/>
    </li>
    <li>
        <label>Project Launch Name</label><input style="float:right;"/>
    </li>
    <li>
        <label>Project Description</label><input style="float:right;"/>
    </li>
    <li>
        <label>Category</label><input style="float:right;"/>
    </li>
    <li>
        <label>Sub-Category</label><input style="float:right;"/>
    </li>
    <li>
        <label>Global Brand Concept</label><input style="float:right;"/>
    </li>
    <li>
        <label>Local Brand</label><input style="float:right;"/>
    </li>
    <li>
        <label>Activity Type</label><input style="float:right;"/>
    </li>
    <li>
        <label>Stage</label><input style="float:right;"/>
    </li>
    <li>
        <label>Status</label><input style="float:right;"/>
    </li>
    <li>
        <label>Innovation Type</label><input style="float:right;"/>
    </li>
    <li>
        <label>Innovation Sub Type</label><input style="float:right;"/>
    </li>
  </ul>
</div>

但它看起来并不合适：

我无法找到许多使用纯HTML和CSS（与IE9兼容）的资源，而是使用JavaScript和/或CSS3来完成此任务。

Answer 1

从输入标记中移除float:right，并为您的标记应用width和inline-block。

<强> HTML

 <ul class="test">
<li>
    <label>Project Name</label><input type="text"/>
</li>
<li>
    <label>Project Launch Name</label><input type="text"/>
</li>
<li>
    <label>Project Description</label><input type="text"/>
</li>
<li>
    <label>Category</label><input type="text"/>
</li>
<li>
    <label>Sub-Category</label><input type="text"/>
</li>
<li>
    <label>Global Brand Concept</label><input type="text"/>
</li>
<li>
    <label>Local Brand</label><input type="text"/>
</li>
<li>
    <label>Activity Type</label><input type="text"/>
</li>
<li>
    <label>Stage</label><input type="text"/>
</li>
<li>
    <label>Status</label><input type="text"/>
</li>
<li>
    <label>Innovation Type</label><input type="text"/>
</li>
<li>
    <label>Innovation Sub Type</label><input type="text"/>
</li>

<强> CSS

 ul.test {float: left; width: 100%; margin: 0 0 1em 0;list-style: none;}
 ul.test li {float: left; width: 49%;}
 ul.test li label{width:150px; display:inline-block;}

DEMO