Проблема с <input type = 'text' /> и <textarea>width - PullRequest
Новая
       11

Проблема с <input type = 'text' /> и <textarea>width

8 голосов
/ 03 ноября 2008

В следующем коде элементы INPUT и TEXTAREA отображаются шире, чем должны. Как я могу ограничить их до 100% полезной площади внутри div? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
       .mywidth{ width:100%; }
    </style>
</head>
<body>
    <div style="border: 3px solid green; width: 100px;">
        <input class="mywidth" ><br />
        <textarea class="mywidth"></textarea><br />
        <div style="background-color: yellow;" class="mywidth">test</div>
     </div>
</body>
</html>

Примечание. Если я удаляю DOCTYPE, он рендерится, как и ожидалось, с INPUT, TEXTAREA и внутренним DIV одинаковой ширины и не выходит за пределы содержащего DIV.

Обновление: не выдерживая границы по умолчанию для этих элементов, он все равно отображается неправильно в IE7 .

Ответы [ 6 ]

11 голосов
/ 22 июля 2010

У меня была такая же проблема. Я использовал свойство размера ящика, упомянутое здесь:

Как сделать ширину TextArea 100% без переполнения при наличии заполнения в CSS?

Вот как это выглядело для меня: 

<style>
   .mywidth{ 
     width:100%;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    } 
</style>
7 голосов
/ 03 ноября 2008

Входы и текстовые области имеют границы по умолчанию 

<style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

отобразит все элементы в вашем контейнере.

Обновление

IE также имеет левый и правый отступы для каждого элемента, и следующий CSS подходит для всех элементов в контейнере в FF3, FF2, Safari 3, IE6 и IE7. 

<style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

Однако не забывайте, что вам, вероятно, понадобится рамка и, возможно, заполнение, чтобы поля выглядели пользователям как обычно. Если вы установите эту границу и заполните сами, тогда вы узнаете, в чем разница между браузерами между шириной контейнера и шириной, которую вам нужно будет дать элементам input / textarea.

1 голос
/ 03 ноября 2008

@ У Фила есть ответ, выше.

Между прочим, использование Firebug действительно показывает границы по умолчанию для текстовой области и элементов ввода. Так что использование Firebug могло бы помочь.

0 голосов
/ 18 июля 2009

xhtml строгий код, кажется, делает это с формами. Я просто делаю входные данные и текстовые области растягиваются на 99%, и это, кажется, работает. попробуй.

0 голосов
/ 03 ноября 2008

Добавьте "padding-right: 3px;" в div, так что это читается как: 

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Поскольку вы добавили границу в div, которая также считается внутренним пространством div.

Причина, по которой это работает без объявления документа, заключается в том, что браузер отображает страницу не как переходный XHTML, а как обычный старый html, который имеет другой метод рендеринга для div и т. Д.

0 голосов
/ 03 ноября 2008

Вы можете попробовать использовать этот DOCTYPE вместо 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...