divs被推下來

嘿傢伙我正在做一個網站，但由於某種原因，我的div標籤被推下來，當他們離開窗戶。例如，這是我的導航。divs被推下來

enter image description here

然後，當我讓瀏覽器窗口小它這樣做。

enter image description here

這些都是做的導航屬性。

.navigation_container { 
margin: 0; 
padding: 0; 
position: relative; 
padding-top: 30px; 
} 

.navigation { 
height: 40px; 
color: #FFFFFF; 
font-size: 15px; 
list-style: none; 
} 

.link { 
height: 10px; 
float: left; 
position: relative; 
margin-top: 15px; 
margin-left: 15px; 
text-decoration: none; 
} 

.link_a { 
text-decoration: none; 
padding: 10px; 
}

此外我的HTML代碼爲那些誰想要它。

   <div class="navigation_container"> 
        <div class="navigation"> 
         <li class="link"><a class="link_a current" href="">Home</a></li> 
         <li class="link"><a class="link_a" href="">Features</a></li> 
         <li class="link"><a class="link_a" href="">Contact</a></li> 
         <li class="link"><a class="link_a" href="">Link1</a></li> 
         <li class="link"><a class="link_a" href="">Link2</a></li> 
        </div> 
       </div>

任何幫助，爲什麼發生這種情況將不勝感激。

謝謝。

來源

2012-01-28 Duncan Palmer

你想要發生什麼？這是默認行爲。 – Blender 2012-01-28 05:55:06

我希望它保持它的位置或消失。 – 2012-01-28 05:56:24

然後你需要'min-width'。 – Blender 2012-01-28 05:59:59

你沒有發佈你的HTML，所以在黑暗中的鏡頭位置，但指定一個最小寬度，以防止它們纏繞。

.navigation_container { 
    min-width: somepx; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    padding-top: 30px; 
}

來源

2012-01-28 05:56:43 mrtsherman

我現在發佈了html代碼。 – 2012-01-28 05:57:49

好的，謝謝你的建議！而不是將最小寬度放入導航容器中，而是將其放在整個標題上，它似乎可以工作。非常感謝。 – 2012-01-28 06:00:51

@DuncanPalmer - 是的，只是設置一個最小寬度。我可能會做導航，而不是navigation_container。只要確保所有按鈕的最小寬度足夠寬。 – mrtsherman 2012-01-28 06:00:59

我會建議您不要使用div作爲導航欄，而是使用水平列表。較少的HTML，更乾淨的代碼。

這裏是一個例子：http://css.maxdesign.com.au/listutorial/horizontal_master.htm

來源

2012-01-28 06:14:36

回答

相關問題