使用填充設計帶有寬度的HTML FORM元素，寬度爲100％

我使用具有固定寬度列的表格設計表單，並且希望<td>內的輸入元素填充容器。我知道CSS盒子模型，我知道元素會通過width: 100%流血，但問題在於它的一致性。使用填充設計帶有寬度的HTML FORM元素，寬度爲100％

<input>元素如預期流血，但<select>元素沒有。這導致我的字段沒有正確排列。我已經嘗試過所有的屬性，如溢出，顯示，空白......它沒有任何區別。什麼是<select>元素？我可以在Firebug中看到它們與輸入元素具有相同的盒子模型屬性，但它們的渲染效果不一樣。

我使用的是HTML 5文檔類型，這種情況發生在Firefox和Chrome中。

現在，我正在使用一個JS函數來解決這個問題，該函數選擇所有具有類拉伸的元素並計算並設置靜態寬度以使其適合容器內部。這完美地排列了表單的元素。（我不得不排除<select>元素，因爲它們的寬度已經很好......奇怪的怪癖。）

是否有純CSS解決方案？我不想在每次更新頁面的一部分時都運行此功能，就像在AJAX調用中一樣...

來源

2010-02-25 Engwan

我們可以看到一些源代碼嗎？ – Jack

我做了一個截圖，以澄清問題： http://smg.photobucket.com/albums/v208/Engwan/StackOverflow/?action=view¤t=formtables.png – Engwan

不是最有用的答案，但表單元素的CSS樣式在瀏覽器之間相當不可靠。像你這樣的JavaScript解決方案是最好的選擇。

兩個原因不可靠：

形式的元件中的某些功能不能由CSS進行說明。 <select>元素就是一個很好的例子：沒有任何CSS屬性可以描述不同操作系統上元素看起來不同的方式。

試圖找出哪些CSS屬性應該影響表單元素，以及如何是瀏覽器製造商的老鼠窩，所以他們主要是讓它獨立。 Safari是一個顯着的例外;見例如http://webkit.org/blog/17/the-new-form-controls-checkbox-2/
無論網站所有者的意圖如何，您都可以爭辯表單元素在網站之間看起來應該是一樣的，這樣用戶就知道他們點擊了什麼。

請參閱http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/進行更深入的檢查。

來源

2010-02-25 07:51:14

最好的方法是用div來僞造元素的邊框。

<div class="formholder> 
    <textarea></textarea> 
</div>

有了這個CSS：

.formholder {padding:10px;background:white;border:1px solid #ccc} 
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}

當然，你也可以展開爲其他領域。某些瀏覽器可能會給您提供問題。 Chrome和webkit允許您調整textareas的大小，但如果您將resize: none;添加到CSS，則應該禁用它，但是YMMV。

來源

2010-02-25 08:00:57 Oli

是的，這應該工作，但我想以避免這種情況，因爲即時通訊開發一個有很多形式和很多領域的Web應用程序..不想太多混亂 – Engwan

說你的HTML看起來有點像這樣：

<form><table><tr> 
<td><input type="text" /></td> 
<td><select><option /><option /></select></td> 
</tr></table></form>

如何只使用input和select設置寬度？

td { width: auto; } 
input[type=text] { width: 100px; } 
select { width: 100px; }

還是我得到你的問題錯了？

來源

2010-02-25 08:05:31

我想它取決於容器，因爲我想設計是流體。例如，在具有3列的表中，我定義了2列的寬度，並根據表大小讓第3列自動調整大小。我想要td中的表單元素效仿 – Engwan

它可以幫助您瞭解各種可用性研究的以下結果。

1）對於大多數的形式，人們更喜歡看到的只是表單元素上面的標籤：

2）人們發現它有用，如果表單元素的大小是否合適，以幫助建議多少信息的預期。

<ul> 

    <li><label for="firstname">First Name</label><br> 
     <input type="text" id="firstname" name="firstname" size="15"></li> 

    <li><label for="age">Age</label><br> 
     <input type="text" id="age" name="age" size="3"></li> 

    <!-- ... more list items --> 

</ul>

注意：此示例中的列表將被樣式化，以便它不會顯示爲項目符號列表。以這種方式使用列表有助於提高可訪問性，因爲屏幕閱讀器會告訴用戶列表中包含多少項目。

我認爲這可能是有用的，因爲它表明你的努力可能有點浪費，試圖在表格中佈局表格並將所有輸入拉伸到相同的長度。

http://dev.w3.org/html5/markup/input.html#input

來源

2010-02-25 08:19:51 Fenton

你可以在文本框和文本區域的使用box-sizing: border-box;。它解決了選擇框的差異。

來源

2012-11-01 13:01:15 Reina

這應該是明顯的答案 - 謝謝！ – schlenger

以下CSS適用於Moz Firefox，html輸入元素（提交，按鈕，文本），textarea元素，甚至選擇元素。我選擇的元素在瀏覽器中的長度幾乎相等。

table {width:100%;} 
form input { width: 100%; } 
form textarea { width: 100%; overflow-y: scroll; resize: vertical; } 
form select { width: 100%; }

來源

2013-01-10 12:42:51

使用填充設計帶有寬度的HTML FORM元素，寬度爲100％

回答

相關問題