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

Что мне нужно сделать, чтобы следующее не растянулось более чем на 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>

html css xhtml
person mike    schedule 08.07.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

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

person brad    schedule 08.07.2010

arrow_upward
0
arrow_downward

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

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

form {
    padding: 20px;
}
person melhosseiny    schedule 08.07.2010