Làm cách nào để tạo kiểu danh sách các cặp tên-giá trị xuất hiện như một bảng HTML?

Question

Tôi đã kế thừa báo cáo biểu mẫu web bằng cách sử dụng các điều khiển máy chủ HTML và ASP.NET thuần túy và mẫu bố cục chung là phần được đặt ra bằng bảng bốn cột, cột đầu tiên và thứ ba được sử dụng cho nhãn trường và thứ hai và cột thứ tư cho các giá trị.

Vì tôi đã được giao nhiệm vụ 'làm lại da' báo cáo tôi nghĩ tôi muốn thử và cải thiện ngữ nghĩa của đánh dấu và xóa tất cả các bảng không được sử dụng cho dữ liệu bảng thực tế. Sau khi một số thí nghiệm với danh sách định nghĩa cho các cặp tên-giá trị, tôi giải quyết thay vì trên một ol/li kết hợp, nhưng tôi không thể tìm ra cách để có được cả hai yếu tố văn bản bên trong mỗi li để chiếm 50% chiều rộng của toàn bộ li phần tử.

Đây là css cho danh sách:

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

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

Đây là 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> 

Và đây là những gì tôi nhận được kết quả. Phần Chi tiết Báo cáo là một bảng hai cột, trong đó Chi tiết Báo cáo là danh sách được sắp xếp ở trên. Tôi cố gắng để có được danh sách

Answer 1

Hãy thử điều này:

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%; 
}