奇怪的調整大小與960px的桌面網站

Question

Id想知道爲什麼我的桌面css的內部換行this site不起作用。

基本上，如果設置的內包裹到margin:0 auto; and width: auto;是沒有問題的，但它不是集中在頁腳或主div

當我有包裹物，因爲它是當前設置margin:0 auto; and width:960px;你會發現頁面顯示水平滾動條在調整窗口大小之後，所有內容都被擠壓到左側，白色背景開始變得可見。

反正有沒有滾動條出現和內容變得擠壓流暢地轉換到下​​一個平板電腦大小布局？

Answer 1

這表明由於採用100％寬的父元素，當你在.innerwrap

Read this article about the Box Model

使用某些元件的側部填充的應用填充的滾動條的不推薦，因爲它增加了寬度整個組，並且因爲你使用瀏覽器寬度，它顯示了滾動條來查看你添加的額外空間。

我的卑鄙的建議是，如果你想要一個塊元素出現居中應用margin:auto樣式規則，只要有可能，同樣也必須顯示爲一個沒有浮點的塊元素。

刪除此：

.innerwrap { 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 10%; 
    padding-right: 10%; 
    width: 80%; 
} 

保持這種

.innerwrap { 
    margin: auto; 
    width: 960px; 
} 

因爲你所申請的固定利潤率爲你社交圖標就會顯示出錯位的，所以不要用固定的利潤爲中心的他們，用百分比寬度代替。

可能要使用通用類對準他們

.social { 
    background-position: center center; 
    background-repeat: no-repeat; 
    display: block !important; 
    float: none; 
    height: 150px; 
    margin: auto; 
    padding-top: 50px; 
    width: 30% !important; 
} 

對於a.twittersocial和a.twittersocial：懸停和社會聯繫的其他部分只保留了背景屬性。

如果您需要將常用樣式規則應用於多個元素（如果有多個元素）並且在可能時避免使用ID選擇器，請使用類別（.daclass）來創建確定的類。

使用網絡檢查員，如Firebug來追蹤樣式錯誤。

祝你好運開發者！