用CSS控制表格的佈局

Question

即時通訊新的CSS支持我！我有以下形式：

我想控制輸入文本字段的寬度（即增加他們允許更長的名稱）。如果我使用下面的CSS，我可以達到這個效果。

input { 
    width: 342px; 
} 

但是這也增加了按鈕和複選框的寬度，得到以下：

如何控制每個輸入的單獨的長度（以及可能在未來各文本框分開）？我必須爲每個人分配一個班級並分別控制他們嗎？

Answer 1

您可以指定幾個類來管理表單字段的寬度/高度，並根據需要應用。我個人認爲現在的做法很常見（不要求），即使投入100％寬，並使用包裝容器來調整它們的寬度。當你使用網格系統並且你想要更緊密地對齊時，這是有意義的。

input[type="text"], 
input[type="submit"], 
select, 
textarea { 
    box-sizing: border-box; 
    width: 100%; 
} 

你可以試試目標，而不是包裝容器中的元素，或指定寬度班的每個元素，像這樣具體的投入：

input[type="text"] {} 
input[type="submit"] {} 
select {} 
textarea {} 

Answer 2

你可以給表單元素類的名字和他們的風格爲一組，也可以根據類型或名稱

input[type=input] { //styles all input boxs } 
input[type=submit] { //styles for your submit button } 

您可以使用複選框/收音機瞄準他們等

，或者你可以通過使用目標細節

input[name=namehere] { //styles }