Как я могу стилизовать список пар имя-значение, чтобы они выглядели как таблица HTML?

Question

Я унаследовал отчет о веб-формах, созданный с использованием серверных элементов управления HTML и ASP.NET, и общий шаблон макета представляет собой раздел, построенный с использованием таблицы из четырех столбцов, причем первый и третий столбцы используются для меток полей, а такжевторой и четвертый столбцы для значений.

Поскольку мне было поручено «перекрасить» отчет, я подумал, что попытаюсь улучшить семантику разметки и удалить все таблицы, не используемые для фактических табличных данных.После некоторых экспериментов со списками определений для пар имя-значение я остановился на комбинации ol / li , но не могу понять, как получить оба текстовых элемента внутри каждого li занимать 50% ширины всего элемента li .

Это css для списка:

ol.name-value
{
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

Это HTML:

<div class="span-12">
    <ol class="name-value" style="width: 100%;">
        <li>                    
            <label for="about">Client</label>
            <span id="about">Apartment Applied Visual Arts</span>
        </li>
        <li>
            <label for="about">Report Date</label>
            <span id="Span1">2011/08/08 16:50:10</span>
        </li>
        <li>
            <label for="about">Report No.</label>
            <span id="Span2">33251</span>
        </li>
    </ol>
</div>

И вот что я получаю в результате.Раздел «Сведения об отчете» представляет собой таблицу из двух столбцов, где «Сведения об отчете» - это упорядоченный выше список.Я пытаюсь получить список

Answer 1

Попробуйте это:

ol.name-value {
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

ol.name-value li label {
    display: table-cell;
    width: 50%; 
}

ol.name-value li span {
    display: table-cell;
    width: 50%; 
}