有沒有一種簡單的方法可以使 html textarea 和 input type 文本同樣寬？
[英]Is there a simple way to make html textarea and input type text equally wide?
問題描述
是否有一種簡單的方法可以讓 HTML textarea 和 input type="text" 以（大約）相等的寬度（以像素為單位）呈現，適用於不同的瀏覽器？
CSS/HTML 解決方案會很棒。 我寧願不必使用Javascript。
謝謝/埃里克
12 個解決方案
解決方案1
16 已采納 2008-08-26 17:56:11
你應該可以使用
.mywidth { width: 100px; }
<input class="mywidth"> <br> <textarea class="mywidth"></textarea>
解決方案2
5 2008-08-28 15:33:01
回答第一個問題（盡管它已經被回答到死了）：CSS 寬度正是您所需要的。
但我想在答案中回答蓋烏斯的問題。 Gaius，你的問題是你在 em 中設置寬度。 這是一個很好的想法，但您需要記住 em 是基於字體大小的。 默認情況下，輸入區域和文本區域具有不同的字體和大小。 因此，當您將寬度設置為 35em 時，輸入區域使用其字體的寬度，而 textarea 使用其字體的寬度。 文本區默認字體較小，因此文本框較小。 以像素或點為單位設置寬度，或確保輸入框和文本區域具有相同的字體和大小：
.mywidth { width: 35em; font-family: Verdana; font-size: 1em; }
<input type="text" class="mywidth"/><br/> <textarea class="mywidth"></textarea>
希望有幫助。
解決方案3
4 2008-08-26 18:09:22
其他人提到了這一點，然后刪除了它。 如果您想在沒有類的情況下以相同的方式設置所有文本區域和文本輸入的樣式，請使用以下 CSS（在 IE6 中不起作用）：
input[type=text], textarea { width: 80%; }
解決方案4
3 2014-06-11 04:50:29
使用 CSS3 使文本框和輸入的工作相同。 參見jsFiddle 。
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
解決方案5
3 2008-08-26 18:59:54
這是一個 CSS 問題：寬度包括邊框和填充寬度，它們在不同瀏覽器中的 INPUT 和 TEXTAREA 具有不同的默認值，因此也將它們設置為相同：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
這在 CSS 規范的Box 尺寸部分中有描述，其中說：
框寬度由左右邊距、邊框和填充以及內容寬度的總和給出。
解決方案6
1 2008-08-26 17:56:25
就在這里。 嘗試做這樣的事情：
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
兩者應該等同於相同的大小。 您可以使用絕對尺寸 (px)、相對尺寸 (em) 或百分比尺寸來實現。
解決方案7
0 2008-10-03 14:24:37
正如在XHTML 1.0 嚴格的 Unequal Html 文本框和下拉寬度中提到的，它還取決於您的文檔類型。 我注意到在使用 XHTML 1.0 strict 時，確實會出現寬度差異。
解決方案8
0 2014-07-24 15:29:51
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
解決方案9
0 2008-08-26 18:01:35
請注意 - 寬度總是受到客戶端發生的事情的影響 - PHP 不能影響這些事情。
在元素上設置一個公共類並在 CSS 中設置一個寬度是你最干凈的選擇。
解決方案10
0 2008-08-26 18:39:06
使用 CSS 類作為寬度，然后將您的元素放入 HTML DIV，具有上述類的 DIV。
這樣，布局控制整體應該會更好。
解決方案11
0 2018-05-12 18:35:05
現在，如果您使用引導程序，只需為您的輸入字段提供form-control類。 就像是：
<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">
<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>
解決方案12
-1 2013-07-23 13:32:26
您還可以使用以下 CSS：
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML：
<input class="mywidth" >
<textarea></textarea>
html5 或 css '智能文本流' 將句子或段落均勻分布在同樣寬的行上？
[英]html5 or css 'smart text flow' to evenly distribute a sentence or paragraph over equally wide lines?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.