100% ширины элементов div и формы + отступы? - PullRequest
Новая
       0

100% ширины элементов div и формы + отступы?

1 голос
/ 08 июля 2010

Что я должен сделать, чтобы предотвратить растяжение следующих 100%? Очевидно, он растягивается до 100%, а затем добавляет отступы ... Спасибо! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css" media="screen">
        #box {
            width: 100%;
            padding: 20px;
            border: 1px solid #000;
        }
        #box input { 
            width: 100%;
            padding: 5px; 
        }
    </style>
</head>
<body>
    <div id="box">
        <form>
            <input type="text" value="" />
        </form>
    </div>
</body>
</html>

Ответы [ 2 ]

5 голосов
/ 08 июля 2010

Ваши width:100% на div вообще не нужны. Div - это элементы уровня блока, которые автоматически расширяются до 100% своего контейнера. Удалите width:100% из вашего объявления div, и отступ будет содержаться в родительском контейнере, без прокрутки или расширенной ширины.

НЕ используйте отрицательную маржу, это просто добавление хака для достижения чего-то простого.

Вы можете использовать это правило в целом: вам почти никогда не придется помещать width:100% в div (я не могу придумать, почему бы вам, если бы оно не отображалось в строке или что-то в этом роде), потому что, как упоминалось выше элементы уровня блока всегда расширяются до 100% своего контейнера

edit: глупо было предложить установить ширину 100% для отображаемой строки в div, поскольку вы не можете установить размеры для встроенного элемента

0 голосов
/ 08 июля 2010

Создайте новое правило form и переместите в него объявление padding: 20px;. 

#box {
    width: 100%;
    border: 1px solid #000;
}

form {
    padding: 20px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...