如何阻止我的鏈接在DIV內部換行？

當我縮小瀏覽器的大小時，如何阻止我的鏈接堆疊在一起，移動，向下和消失？我想讓他們留在橫向格內。

<div class="nav"> 
<a href="contact.htm" class="navlink">CONTACT</a> 
<a href="contact.htm" class="navlink">GET INVOLVED</a> 
<a href="contact.htm" class="navlink">Q+A</a> 
<a href="contact.htm" class="navlink">HOW IT WORKS</a> 
<a href="contact.htm" class="navlink">WHO WE ARE</a> 
<a class="logo" href="home.htm"></a> 
</div> 



.nav {width: 100%; height: 84px; float:left; background: #333;} 
.logo {width: 317px; height: 84px; float:left; background:url('img/lifesign.png');} 
.navlink {height:84px ;font-family: 'open_sansbold'; color:#FFF; text-align:center;line-height:84px;padding-left: 22px;padding-right:22px;float:right;font-size:80% }

來源

2012-12-06 Erik

在您的.nav類上設置min-width。

.nav { 
    width: 100%; 
    height: 84px; 
    float: left; 
    background: #333; 

    min-width: 960px; /* or whatever width you need */ 
}

來源

2012-12-06 02:06:18

我認爲這裏的理想是創建固定寬度的DIV（「頁面」下面的ID）來包含你的資產淨值和其他網頁元素。我還自由地清理了一些航海本身的結構，以及一些更不必要的規則。我認爲這裏的清單很理想。你可能想要顛倒它的順序，因爲你是正確的，但否則它的效果很好。

<html> 
    <head> 
     <style> 
     body { text-align: center; } 
     #container { width: 960px; margin: 0 auto; } 
     #nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; } 
     #nav li { float: right; } 
     #nav li.logo { float: left; } 
     #nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; } 
     #nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <ul id="nav"> 
       <li class="logo"><a href="home.htm"></a></li> 
       <li><a href="contact.htm">CONTACT</a></li> 
       <li><a href="contact.htm">GET INVOLVED</a></li> 
       <li><a href="contact.htm">Q+A</a></li> 
       <li><a href="contact.htm">HOW IT WORKS</a></li> 
       <li><a href="contact.htm">WHO WE ARE</a></li> 
      </ul> 
      <div id="main"> 
       <!-- page content here --> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-12-06 02:57:56 JPRO

還使用'margin：0 auto;'將固定寬度的'容器'div保持在頁面的中心。 – JPRO

如何阻止我的鏈接在DIV內部換行？

回答

相關問題