2010-07-08 2 views
0

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

<!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> 

ответ

4

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

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

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

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

0

Создать новую form правила и переместить padding: 20px; декларацию к нему.

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

form { 
    padding: 20px; 
} 
Смежные вопросы