如何拉伸頂部導航至適合頁面寬度集裝箱

我嶄新的這個編碼的東西，所以請去容易對我。）如何拉伸頂部導航至適合頁面寬度集裝箱

我努力讓自己在這個網站舒展的頂部導航，以適應我所理解的是寬度爲900px的網站「容器」的寬度。我不能爲我的生活刪除似乎是填充或頁邊空白的左側和右側。見下面的代碼。

網站截圖在這裏：http://img560.imageshack.us/img560/9479/237c.png

現在我只是巧妙地作出調整，填充，使有些在頁面上居中的資產淨值，但最終它看起來好多了，如果它的邊緣巧遇遏制者就像其他一切。

Thx尋求幫助。

/* Navigation 
--------------------------------------------------------------------------------*/ 


#topnav { 
    clear: both; 
    margin: 0 0; 
    overflow: hidden; 
} 

#topnav ul { 
    list-style: none; 
    float: left; 
    text-align: center; 
} 

#topnav ul li { 
    list-style: none; 
    float: left; 
    background: url(nav-sep.png) right 0px no-repeat; 
    padding: 15px 0px 12px 0px; 
    display: inline block; 
} 

#topnav ul > li:last-child, 
#topnav ul > span:last-child li { 
    background: none; 
    padding-right: 0; 
} 

#topnav a { 
    float: left; 
    display: block; 
    color: #545454; 
    font-family: Blair, sans-serif; 
    font-weight: 500; 
    padding: 6px 0 6px; 
    border: 0; 
    border-top: 3px solid transparent; 
    outline: 0; 
    margin: 0 16.6px; 
    list-style-type: none; 
    font-size: .75em; 
    text-transform: uppercase; 
} 

#topnav ul > li:last-child a, 
#topnav ul > span:last-child li a { 
    margin-right: 0; 
} 

#topnav li#active a, 
#topnav a:hover { 
    color: #666666; 
    border: 0; 
    border-top: 3px solid #8cc640; 
}

來源

2013-12-09 mjoel87

怎麼回合一些HTML和的jsfiddle：http://jsfiddle.net？ –

您可以添加一些HTML來向我們展示您的頁面結構嗎？更好的是，建立一個小提琴（http://jsfiddle.net） – zsaat14

嘗試用

margin-left:auto; 
    margin-right:auto;

參見：

Cross browser method to fit a child div to its parent's width

希望這有助於。乾杯。

來源

2013-12-09 19:17:28 dwettstein

我想說添加一個主容器的div會附上所有現有的HTML，然後定義的CSS它與保證金左/右，作爲汽車：

<head> 
    ....... 
    <style> 
    #mainContainer { 
     margin-left: auto; 
     margin-right: auto; 
    } 
    </style> 
    </head>  
    <html> 
    <body> 
    <div id="mainContainer"> 
    ............................ 
    ............................ 
    ............................ 
    </div> 
    </body> 
    </html>

來源

2013-12-09 19:21:24 user2196728

嗨，如果你是新的這需要知道默認情況下，所有元素標記（例如ul,p或body）對於像margin和padding這樣的屬性默認具有某些值。你需要的是首先在CSS中重置這些值，以避免問題並使你的cutomization更容易。在你的情況ul有一些屬性：

ul { 
    display: block; 
    list-style-type: disc; 
    margin-before: 1em; 
    margin-after: 1em; 
    margin-start: 0; 
    margin-end: 0; 
    padding-start: 40px; 
}

你可以使用這個簡單的全局復位與*隨着全球選擇：

* { 
    margin:0; 
    padding:0; 
}

或者尋找一些複雜的復位喜歡this one。

然後與0值，您可以以更好的方式自定義元素：

#topnav ul { 
    list-style: none; 
    float: left; 
    text-align: center; 
    width:100%; 
}

來源

2013-12-09 19:27:07 DaniP

如何拉伸頂部導航至適合頁面寬度集裝箱

回答

相關問題