Как выровнять поле textarea в соответствии с шириной полей текстового поля в форме HTML?

Question

Я проектировал форму веб-страницы, в которой было несколько текстовых полей и полей textarea, и заметил, что с этими полями возникают определенные проблемы с выравниванием.

Код такой, как показано ниже -

<textarea rows="4" cols="30" name="details"></textarea>
<input type="text" name="username" size="30"></input>

Хотя оба поля имеют ширину col, установленную на 30, я вижу, что ширина текстовой области распространяется на ширину текстового поля.Я использовал overflow: hidden, используя css для поля textarea, а затем попытался изменить его размер с помощью свойства cols, установленного на 25, 26 и т. Д., Но все еще видел, что выравнивание не идеально (хотя и очень близко).

Вопрос - есть ли лучший способ выровнять все поля в форме, чтобы иметь стандартную ширину, скажем, 30cols?

Answer 1

Использование CSS для стилизации элементов обычным способом:

<textarea style="width:400px;" rows="4" cols="30" name="details"></textarea><br/>
<input  style="width:400px;" type="text" name="username" size="30"/>

Я использую встроенные стили только в качестве примера, вы хотите назначить классы, использовать таблицу стилей и т. Д. Кроме того, я исправил опечатку в элементе ввода текста, поскольку он является самозакрывающимся тегом.

Удачи!

Answer 2

Попробуйте добавить это в свою таблицу стилей CSS:

textarea#styled {
    width: 600px;
}

Затем добавьте идентификатор в текстовое поле:

<textarea rows="4" id="styled" name="details"></textarea>

Вы также можете попробовать поместить оба эти элемента в HTMLтаблица с выравниванием таблицы по центру.