如何讓鏈接div填充導航容器？

我正在嘗試開發一個可以響應屏幕大小的網頁。然而，我無法想出一個辦法來做到這一點，並填寫導航div與導航div。我有一個屏幕截圖，下面有代碼。小屏幕尺寸和鏈接div也存在問題。我希望div與屏幕縮小，而不是堆疊在一起。至少直到某一點。有關這方面的信息也會有幫助。另外，如果你喜歡，解釋爲什麼發生這些事情也會有所幫助。那麼請告訴。 enter image description here 如何讓鏈接div填充導航容器？

HTML：

<nav id="nav"> 
      <a href="FYFHome.html" ><div id="link"><p>Home</p></div></a> 
      <a href="FYFHome.html" ><div id="link"><p>Services</p></div>  </a> 
      <a href="FYFHome.html" ><div id="link"><p>Our Customers</p></div></a> 
      <a href="FYFHome.html" ><div id="link"><p>Contact</p></div></a> 
     </nav>

CSS：

#link 
{ 
    height: 70%; 
    width: 25%; 
    display: inline-block; 
    border: 1px dotted green; 
    text-decoration: none; 
    text-align: center; 
    padding: none; 
} 

#nav 
{ 
    border: 1px solid black; 
    width: 100%; 
    height: 80px; 
    margin: auto; 
}

來源

2015-04-12 JavaFox

只需添加float:left

*{box-sizing: border-box;} 
 

 
#nav { 
 
    border: 1px solid black; 
 
    width: 100vw; 
 
    height: 80px; 
 
    margin: auto; 
 
} 
 
#link { 
 
    height: 70%; 
 
    width: 25%; 
 
    display: inline-block; 
 
    float: left;/*add this*/ 
 
    border: 1px dotted green; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: none; 
 
}

<nav id="nav"> 
 
    <a href="FYFHome.html"> 
 
    <div id="link"> 
 
     <p>Home</p> 
 
    </div> 
 
    </a> 
 
    <a href="FYFHome.html"> 
 
    <div id="link"> 
 
     <p>Services</p> 
 
    </div> 
 
    </a> 
 
    <a href="FYFHome.html"> 
 
    <div id="link"> 
 
     <p>Our Customers</p> 
 
    </div> 
 
    </a> 
 
    <a href="FYFHome.html"> 
 
    <div id="link"> 
 
     <p>Contact</p> 
 
    </div> 
 
    </a> 
 
</nav>

來源

2015-04-12 17:51:57

這裏有一個JSFiddle

25％的人會適應，但因爲你加2個像素的邊界（1px的左側和1px的正確）給你的div，它太寬了。包含邊框（或填充和邊距）的最佳方式是calc()函數，因此請使用calc(25% - 2px)。下一個問題是divs之間的空白。他們在那裏是因爲元素之間的空白/換行符。只需添加一個元素的結束標記在接下來的一個線（或只是簡單的>）

<nav id="nav"> 
<a href="FYFHome.html"><div id="link"><p>Home</p></div></a 
><a href="FYFHome.html"><div id="link"><p>Services</p></div></a 
><a href="FYFHome.html"><div id="link"><p>Our Customers</p></div></a 
><!-- No more line breaks or spaces between the elements --><a href="FYFHome.html"><div id="link"><p>Contact</p></div></a> 
</nav>

要改變小屏幕的CSS只需添加到您的樣式文件

@media screen and (max-width: 320px) { 
    /* Your CSS for screens smaller than 320px */ 
}

你可以添加儘可能多的那些，所以您可以針對不同的屏幕尺寸使用不同的CSS樣式。

來源

2015-04-12 17:47:59 virhonestum

如何讓鏈接div填充導航容器？

回答

相關問題