2010-02-27 49 views
5

對於做這種表格的最佳方式有什麼建議嗎? http://i.imgur.com/vT7tC.png對多列表格使用CSS

我使用表格+輸入的寬度爲100%,我知道它可能不是最好的方式 (也因爲某種原因,輸入寬度:100%比[td]或[div]大這個圖像的紅色邊框是從[DIV] [輸入...] [/ DIV])

感謝

+0

我認爲你應該編輯整個結構,很難填寫這個表格,很難用CSS編碼 – Harmen 2010-02-27 19:50:22

回答

1

可以漂浮左側的標籤/輸入,左,右標籤/輸入

您將需要指定一個寬度,否則您將最終與您的列之間有一個很大的差距,而您的中間列將不會排隊w ith你的大量正確的輸入。

這是我會怎樣代碼形式:

HTML

<div class="content"> 
    <div class="row"> 
     <div class="lrow"> 
       <label>aaa aaa</label> 
       <input type="text" class="large"> 
     </div> 
     <div class="rrow"> 
       <label>bbb</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>ccc</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>ddd ddd</label> 
       <input type="text" class="large"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>eee</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>fff fff</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="crow"> 
       <label>ggg</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
</div> 

CSS

.content {width:542px;} 
.row {overflow:hidden;margin:5px 0;} 
.row label {float:left;text-align:right;width:60px;margin-right:5px;} 
.row input {float:left;} 
.lrow {float:left;} 
.rrow {float:right} 
.large {width:300px;} 
.small {width:100px;} 
0

不浪費由手工製作列你的時間。

只是使用Blueprint CSS Framework。它非常好用,易於使用,並以您想要的方式完成工作。

最重要的是,您不需要關心瀏覽器的兼容性了。