1. 首頁
  2. 問答
  3. 使用CSS的表格佈局

使用CSS的表格佈局

2010-02-01 70 views
11

我知道已經有一堆關於使用CSS和表格的表格佈局的問題。總體而言，我認爲CSS是一條可行的路線，但是我所看到的所有CSS解決方案都存在着對標籤和/或輸入字段的寬度進行「硬編碼」的缺點。使用CSS的表格佈局

結果是需要爲每個表單添加一個或兩個自定義規則，假設標籤的最大寬度在每種情況下都不相同。

有沒有一種方法可以對錶單進行樣式設置，以便自動將標籤和輸入對齊，而不管標籤有多長？

來源

2010-02-01 Dónal

+2

+1：總是這一個錯誤我也。到目前爲止，我不得不每次硬編碼大小。 – 2010-02-01 04:43:42

+1

如果你製作一個真正的表格佈局，使用'

'沒什麼問題。 – kennytm2010-02-01 13:23:18

+1

@KennyTM - 表格佈局與否。表格應該用於表格數據，而不是佈局。問題的作者甚至承認這一點。 – Finglas 2010-02-01 13:30:30

回答

-1

爲頁面標題中嵌入的特定頁面制定規則沒有任何問題，而不是針對所有內容具有不同的文件。

如果您的形式是如此不同，你說他們，那麼就沒有其他辦法做到這一點，而不是爲每個自定義規則...

無論你是否希望把在所有表單樣式巨大的文件，或只是在頁眉中包含相關的內容，取決於您的用戶在平均訪問時將訪問多少個表單。每次訪問一些表單;把它們放在標題中。平均每次訪問都有很多表單;把它們放在一個單獨的文件中，以便用戶可以緩存它們。

來源

2010-02-01 04:31:39

8

有這個網址看看在窗體上的左手邊 http://www.blueprintcss.org/tests/parts/forms.html

如果你把標籤上的1號線和另一條線路上的輸入框，那麼你不必擔心標籤的排列。款式多一點，你將有一個乾淨漂亮的web2.0狀

enter image description here

乾杯

來源

2010-02-01 05:15:28 Phradion

+0

+1。如果你在一個字段中有一個很長的標籤，而在另一個字段中有一個很短的標籤，那麼即使你使用表格，將它變成2列也是很難看的。使它成爲2行，在第1行中標記，在第2行中創建表單字段。您不必再擔心標籤長度。 – 2010-02-01 05:42:04

+2

這些佈局都不具可比性。 – Greg 2010-02-22 21:26:47

0

好放置標籤上或附近的輸入是一個單獨的討論議題（我建議在主題閱讀盧克萊夫斯基的書：http://www.lukew.com/resources/articles/web_forms.html）

造型Web表單的用處不大。首先，您要確保您以語義恰當的方式標記您的表單。這是您現在使用CSS代替表格的主要優點之一。關於這方面的更多信息，請參閱關於此主題的優秀List Apart文章：http://www.alistapart.com/articles/prettyaccessibleforms/

現在，在上述文章中，作者使用名爲inline-block的顯示屬性。這是實現這種影響的一種相當簡單的方式。只需申請：

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

而您的標籤將有一個固定的長度與輸入相鄰。但是，如果你不指定寬度，只需使用：

label, input { 
    display: inline-block; 
}

那麼你的標籤和輸入都將排隊在線「自動地」爲你把它。這裏的問題不是一個技術問題，而是一個設計問題。如果你輸入不排隊垂直那麼它會變得更加困難了用戶完成表單。這是另一個要考慮的，你應該記住，因爲它更容易在標籤和輸入位置以這種方式比它要適應固定的寬度。

的另一個問題是inline-block的並不在某些瀏覽器很好地工作。 inline-block的是不是在舊版本的Firefox或IE瀏覽器的可靠。所以我傾向於使用另一種方法。假設您使用列表以語義合適的方式標記您的表單。那麼在這種情況下，你可以有這樣的：

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

在這種情況下，我們可以使用一個固定的寬度和絕對定位相鄰排隊我們的元素：

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

標籤相對於定位到列表項目，並且輸入被推到具有左邊距的一側。這個方法雖然有一個問題。此方法只能使用硬編碼寬度。更重要的是，多行標籤不能正確清除。所以在這種情況下，我們可以採取類似的方法，但使用浮動和溢出。

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

用這種方法的標籤浮動到輸入左邊現在：因此，我們可以在相同的HTML標記我前面表明使用這種替代CSS。如果不指定寬度，則標籤的寬度將與其中的內容一樣寬（直到HTML文檔中父節點的寬度）。通過將溢出設置爲隱藏在父對象上，不需要清除該元素。此技術將使用硬編碼寬度或寬度爲auto的繼承默認值。

最後但並非最不重要的，如果你想使用最有效的表單方法（輸入頂部的標籤），這已被證明是用戶可以完成最快的形式的樣式，你需要的唯一的CSS做到這一點是：

label, input { 
    display: block; 
}

另外一個音符 - 你的HTML標記了這樣你可能會想知道所有這些列表元素創建的要點等等。你應該選擇包括您的文檔中的CSS重置爲確保瀏覽器之間的一致性。我推薦Eric Meyer的：

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

來源

2010-02-01 06:10:21

+0

這個問題特別要求解決方案的標籤是任意長度的。這並沒有以任何方式解決這個問題。 – 2010-02-01 09:03:14

+0

啊，我明白了。我會做一些修改來糾正這一點。 – 2010-02-01 13:12:13

+0

發佈的方法雖然只是一個做問題，如果你忽略寬度的規則。我現在已經在解決方案中解釋了這一點，同時也提供了所有三種流行的方法來實現CSS和HTML的這種佈局風格。此外，設計師在設計表格時應該考慮的答案就是考慮因素。此外，它引用適當的方法來標記符合語義的HTML網頁表單，因爲提到的問題是他們從基於表格的佈局過渡。 – 2010-02-01 13:23:48

1

個人意見：使用一個表。

每次你喜歡寫東西

label { 
    width: 150px; /* or whatever width */ 
}

那麼你混合內容和形式，因爲如果你知道它會包含標籤的值只能計算，這違背原則語義CSS純粹主義者。

來源

2010-02-01 13:28:51

+1

這完全不正確。當您使用表格時，您將內容與演示文稿混合在一起。我們擁有CSS的全部原因是將其分開。因此，通過在CSS文件中指定寬度來控制佈局。如果你使用表格。佈局由現在嵌入在內容中的表格元素控制。 – 2010-02-02 01:08:49

+3

我沒有說這不是。我說*甚至*帶有一個風格化的標籤標籤，您將內容與演示文稿混合在一起。 CSS定義不應該依賴於字段包含的內容，而是在這種情況下。所以你不妨使用一張可在所有瀏覽器中可靠工作的表格，OP所需的內容以及幾行代碼。如果CSS爲所有瀏覽器中的* all *需求提供了替代方案，而無需愚蠢的黑客攻擊，表格就可以放棄。 – 2010-02-02 08:03:37

0

您可以通過浮動標籤並將它們放置在浮動塊元素中來處理，並且類似於輸入字段。這將創建一個雙列布局，根據內容自動調整大小。這裏的HTML：

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

，這裏是CSS規則：

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

編輯：如果你想創建標籤和輸入之間的語義連接，您可以正式標記每個標籤作爲HTML標籤然後使用爲和id屬性來鏈接它們。例如，這裏有一個標籤定義：

<div><label for='name'>Name: </div>

，這裏是相應的輸入字段：

<div><input id='name' type="text"></div>

來源

2010-02-01 19:42:41 jdigital

+0

+1：有點冗長，但像魅力一樣工作！ – 2010-02-03 10:16:24

+1

對不起，但這並沒有保持標籤和它們的值之間的任何連接。他們是完全獨立的div，他們唯一的聯繫是可視的，如果你碰巧把他們並排放置。沒有「語義」聯繫，您的內容的含義嚴格依賴於其內容。對齊它們是微不足道的，重點是以有意義的方式對齊它們。 – 2010-02-08 09:49:03

+0

這很容易解決，我已經編輯了相應的答案。 – jdigital 2010-02-08 18:05:43

相關問題

 相關問題