2010-07-08 114 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%。從div聲明中刪除width:100%,填充將包含在父容器中,不滾動或擴展寬度。

不要使用負邊距,這只是添加黑客來實現一些簡單的事情。

您可以使用一般的規則:你幾乎從來沒有把width:100%上一個div(我想不出過爲什麼你會除非它內置顯示什麼我的頭頂部),因爲如上所述,塊級元素總是擴展到它們的容器的100%

編輯:這是啞建議在一個div設置寬度100%顯示直列作爲不能設置一個內聯元件上的尺寸

0

創建一個新的form規則和移動padding: 20px;聲明它。

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

form { 
    padding: 20px; 
}