Проблема с представлением в неупорядоченном списке

Question

У меня проблема с правильным представлением элементов в неупорядоченном списке.Ярлыки плавают влево, а связанные отрезки длинной длины оборачиваются и отображаются под ярлыком.Мне нужно решение, которое хранит связанные промежутки в соответствующих столбцах.Другими словами, я не хочу показывать длинные пролеты под метками.Каким свойством я могу воспользоваться, чтобы получить желаемый макет во всех популярных браузерах, включая IE6?Заранее спасибо за помощь.

Мой код выглядит следующим образом:

<ul>
    <li>
        <label>Name</label>
        <span><%= Html.Encode(Model.Name) %></span>
    </li>
    <li>
        <label>Entity</label>
        <span><%= Html.Encode(Model.Entity) %></span>
    </li>
    <li>
        <label>Phone</label>
        <span><%= Html.Encode(Model.Phone) %></span>
    </li>
</ul>

Мой стиль CSS следующий:

ul
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul li label
{
    float:left;
    width:100px;
}

Answer 1

Это работает в Firefox. Он также должен работать в IE6.

ul li span {
    display: block;
    margin-left: 100px;
}