Căn chỉnh như bảng nhưng với CSS?

Question

Có thể căn chỉnh 2 hàng sau như một bảng không? Hàng đầu tiên là h2 vì nó là tiêu đề và phần còn lại là danh sách. Cột đầu tiên phải khá rộng nhưng phần còn lại có thể rộng bằng văn bản bên trong. Các cột phải điền chiều rộng của div.

<div> 
<h2 class="header1"> 
<span class="span1">one</span> 
<span class="span2">two</span> 
<span class="span3">three</span> 
<span class="span4">four</span> 
</h2> 
<ul><li> 
<span class="span5">five</span> 
<span class="span6">six</span> 
<span class="span7">seven</span> 
<span class="span8">eight</span> 
</li></ul> 
</div> 

div {width: 500px;} 
h2 span, li span {float: left; width: auto; white-space: nowrap;} 

Ví dụ:

Answer 1

HTML

<div class="table-like"> 
    <div> 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    </div> 
    <div> 
    <span>five</span> 
    <span>six</span> 
    <span>seven</span> 
    <span>eight</span> 
    </div> 
</div> 

CSS

.table-like { 
    display: table; 
    width: 500px; 
} 

.table-like div { 
    display: table-row; 
} 

.table-like div span { 
    display: table-cell; 
} 

/* add borders */ 
.table-like, 
.table-like div span { 
    border: 1px solid black; 
} 

/* bold on 1st row */ 
.table-like div:nth-child(1) { 
    font-weight: bold; 
} 

jsFiddle Demo

Answer 2

Thành thực mà nói, nếu bạn đang cố gắng để hiển thị dữ liệu dạng bảng, sử dụng một bảng. Không có gì sai với bảng, chỉ khi bạn đang sử dụng chúng để định vị nội dung không phải dạng bảng. Nếu bạn cần trợ giúp định dạng bảng, hãy chỉnh sửa câu hỏi của bạn.

Answer 3

Cố gắng sử dụng display: inline-block:

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/ 
ul, ul li{display: inline-block; margin:0; padding: 0;}