创建两列垂直排序的动态列表（IE7 Float问题）

Question

我想知道创建两列动态列表的最佳方法是什么？

我已经能够创建垂直排序的两列列表，其中第 1 列向左浮动，第 2 列从第 1 列的顶层开始。但是在 IE7 中，它似乎不喜欢浮动并结束从与第 1 列的最后一行相同的行开始，但在应位于的右侧。 IE8 似乎工作正常。 <li> 条目是在 python 代码中创建的，并使用 innerHTML 和 ajax 放置在 <ul> 中。每个项目都有一个类来定义它是在第 1 列还是在第 2 列。

这就是我想要完成的。

埃 B F CG DH

IE7在使用float时是这样渲染的：

一个 乙 C 德 F G H

是否有解决此问题的方法，还是我应该考虑重新设计我必须使用的表格？ 只是为了让 IE7 工作似乎有点多，但我可能别无选择。

谢谢

更新：

这块是动态替换的。

<div class="location-wrapper">
    <ul name="location" id="id_location" style="list-style: none;"></ul>
</div>

有了这个：

<div class="location-wrapper">
    <ul style="list-style-type: none; list-style-image: none; list-style-position: outside;" id="id_location" name="location">
        <li class="opt_column1"><input type="checkbox" value="20" id="Arbour Lake" name="community_item">Arbour Lake - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="12" id="Brentwood" name="community_item">Brentwood - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="17" id="Citadel" name="community_item">Citadel - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="19" id="Country Hills Village" name="community_item">Country Hills Village - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="13" id="Crowfoot" name="community_item">Crowfoot - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="18" id="Downtown East Village" name="community_item">Downtown East Village - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="11" id="Edgemont" name="community_item">Edgemont - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="14" id="Hamptons" name="community_item">Hamptons - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="9" id="Hawkwood" name="community_item">Hawkwood - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="3" id="Royal Oak" name="community_item">Royal Oak - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="2" id="Scenic Acres" name="community_item">Scenic Acres - (1)</li>
        <li class="opt_column2"><input type="checkbox" value="10" id="Silver Springs" name="community_item">Silver Springs - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="1" id="Tuscany" name="community_item">Tuscany - (1)</li>
        <li class="opt_column2"><input type="checkbox" value="15" id="Varsity" name="community_item">Varsity - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="21" id="Varsity Estates" name="community_item">Varsity Estates - (0)</li>
        <br>
    </ul>
</div>

我的 CSS：

.location-wrapper {
margin:0;
width:42em;
}
.location-wrapper ul {
display:inline-block;
margin:0;
padding:0;
}
li.opt_column1 {
float:left;
width:22em;
}
li.opt_column2 {
margin-left:22em;
}

Answer 1

我找不到在 IE7 中修复此行为的快速解决方案（它在 IE8 及更高版本、FF 和 Chrome 中确实有效），但您可以将 <ul> 元素分成两部分并浮动第一个。这应该适用于每个知道 float 属性的浏览器。

Answer 2

试试这个

.location-wrapper {
    margin:0;
    width:42em;
}
.location-wrapper ul {
    display:inline-block;
    margin:0;
    padding:0;
}
.location-wrapper ul li{
   position:relative;/* IE needs this in order to recognize content in all columns*/
}
li.opt_column1 {
    float:left;
    width:22em;
}
li.opt_column2 {
    margin-left:22em;
}