Создать два столбца динамических списков, отсортированных по вертикали (проблема с плавающей точкой в ​​IE7)

Question

Мне интересно, каков будет лучший способ создания двух столбцов динамических списков?

Мне удалось создать два столбца списков, отсортированных по вертикали, столбец 1 смещен влево, а столбец 2 начинается.на верхнем уровне со столбцом 1. Однако в IE7 он не похож на число с плавающей точкой и заканчивается в той же строке, что и последняя строка столбца 1, но справа от того места, где он должен быть.IE8 вроде работает нормально.Записи <li> создаются в коде Python и помещаются в <ul> с использованием innerHTML и ajax.У каждого элемента есть класс, чтобы определить, находится ли он в столбце 1 или столбце 2.

Это то, что я пытаюсь выполнить.

     A     E
     B     F
     C     G
     D     H

IE7 отображает этот способ при использовании float:

     A
     B
     C
     D     E
           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;
}