Есть ли простой способ сделать текстовое поле html и текст типа ввода одинаково широким?
Ответы 12
Вы должны уметь использовать
.mywidth {
width: 100px;
}<input class = "mywidth">
<br>
<textarea class = "mywidth"></textarea>Кажется, это больше не работает, однако это решение: stackoverflow.com/questions/9555877/… работает
Да, есть. Попробуйте сделать что-нибудь вроде этого:
<textarea style = "width:80%"> </textarea>
<input type = "text" style = "width:80%" />
Оба должны быть одного размера. Вы можете сделать это с абсолютными размерами (px), относительными размерами (em) или процентными размерами.
Просто примечание - на ширину всегда влияет что-то, что происходит на стороне клиента - PHP не может повлиять на такие вещи.
Установка общего класса для элементов и установка ширины в CSS - ваш лучший выбор.
Кто-то еще упомянул об этом, а затем удалил это. Если вы хотите стилизовать все текстовые поля и текстовые поля одинаково без классов, используйте следующий CSS (не работает в IE6):
input[type=text], textarea { width: 80%; }
Используйте класс CSS для ширины, затем поместите свои элементы в HTML DIV, DIV, имеющие упомянутый класс.
Таким образом, общий контроль макета должен быть лучше.
Это вопрос 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, в котором говорится:
The box width is given by the sum of the left and right margins, border, and padding, and the content width.
Чтобы ответить на первый вопрос (хотя на него ответили до смерти): ширина CSS - это то, что вам нужно.
Но я хотел в ответах ответить Вопрос Гая. Гай, проблема в том, что вы устанавливаете ширину в em. Это хорошая идея, но вы должны помнить, что em зависят от размера шрифта. По умолчанию область ввода и текстовая область имеют разные шрифты и размеры. Поэтому, когда вы устанавливаете ширину 35em, область ввода использует ширину своего шрифта, а текстовое поле - ширину этого шрифта. Шрифт текстовой области по умолчанию меньше, поэтому текстовое поле меньше. Либо установите ширину в пикселях или точках, либо убедитесь, что поля ввода и текстовые поля имеют одинаковый шрифт и размер:
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type = "text" class = "mywidth"/><br/>
<textarea class = "mywidth"></textarea>Надеюсь, это поможет.
Как упоминалось в Неравное текстовое поле Html и ширина раскрывающегося списка с XHTML 1.0 strict, это также зависит от вашего типа документа. Я заметил, что при использовании XHTML 1.0 strict разница в ширине действительно появляется.
вы также можете использовать следующие CSS:
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class = "mywidth" >
<textarea></textarea>
Ваше первое решение уже упоминалось в принятом ответе, а второе решение сделает все textarea шириной 100 пикселей.
Используйте CSS3, чтобы текстовое поле и ввод работали одинаково. См. jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type = "text"] { width: 60%; }
input[type = "email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
В наши дни, если вы используете бутстрап, просто присвойте своим полям ввода класс 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>
См. Ответ на Получение элементов управления HTML textarea для расширения до ширины контейнера, он лучше, чем ответы, включенные здесь. Или для полного объяснения: Размеры коробки | CSS-хитрости