代码之家 › 专栏 › 技术社区 › Erik Öjebo

有没有一个简单的方法使HTML文本区域和输入类型的文本同样宽?

textarea css html

Erik Öjebo · 技术社区 · 16 年前

有没有一种简单的方法可以让HTML文本区域和输入type=“text”以相同的宽度(以像素为单位)呈现,在不同的浏览器中工作?

一个CSS/HTML解决方案将会非常出色。我不想使用javascript。

谢谢埃里克

12 回复 | 直到 7 年前

Nhan Jonesinator 8 年前

你应该能用

.mywidth {
  width: 100px;   
}

<input class="mywidth">
<textarea class="mywidth"></textarea>

Nhan Jonesinator 8 年前

要回答第一个问题(尽管它已被死而复生):CSS宽度是您需要的。

但我想回答 Gaius's question 在答案中。盖尤斯,你的问题是你设置的宽度是在他们的。这是一个很好的想法,但你需要记住,他们是基于字体大小。默认情况下,输入区域和文本区域具有不同的字体和大小。因此,当您将宽度设置为35em时,输入区域使用其字体的宽度,文本区域使用其字体的宽度。文本区域默认字体较小,因此文本框较小。以像素或点为单位设置宽度,或者确保输入框和文本区域的字体大小相同:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}

<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

希望有帮助。

John Sheehan 16 年前

其他人提到了这个,然后删除了它。如果要在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式,请使用以下CSS(不适用于IE6):

input[type=text], textarea { width: 80%; }

Peter Hilton 16 年前

这是一个CSS问题:宽度包括边框和填充宽度,对于不同浏览器中的输入和文本区域,这些宽度具有不同的默认值,因此也要使它们相同:

<!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>

这在 Box dimensions CSS规范的一节,其中说明:

框宽由左右边距、边框和填充以及内容宽度之和给出。

thanksd thibaut noah 9 年前

使用css3使文本框和输入工作相同。见 jsFiddle .

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

James B 16 年前

是的,有。尝试这样做:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

两种尺寸应相等。您可以使用绝对大小(px)、相对大小(em)或百分比大小。

mercutio 16 年前

只是一个提示——宽度总是受到客户端发生的事情的影响——PHP不能影响这类事情。

在元素上设置一个公共类,在CSS中设置一个宽度是最干净的赌注。

Drakiula 16 年前

使用一个CSS类作为宽度,然后将元素放入HTML分隔符中,分隔符具有所提到的类。

这样,布局控件整体应该更好。

Community CDub 8 年前

如上所述 Unequal Html textbox and dropdown width with XHTML 1.0 strict 它还取决于您的doctype。我注意到,当使用XHTML 1.0 Strict时,宽度上的差异确实会出现。

themeindia.org 10 年前

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Kurt Van den Branden 7 年前

现在,如果使用引导,只需将输入字段 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>

-1

vitaj 11 年前

您还可以使用以下内容 CSS:

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>