如何让 link div 填充导航容器？

Question

我正在尝试开发一个可以响应屏幕尺寸的网页。但是我想不出一种方法来执行此操作并用 link div 填充导航 div。我在下面有一个屏幕截图和要遵循的代码。小屏幕尺寸和 link div 也存在问题。我希望 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;
}

Answer 1

这是一个JSFiddle

25% 会合适，但由于您向 div 添加了 2 像素边框（左 1 像素，右 1 像素），它太宽了。包含边框（或填充和边距）的最佳方法是 calc() 函数，因此请使用 calc(25% - 2px)。下一期是div之间的白色space。它们在那里是因为元素之间的 spaces / 换行符。只需在下一个元素的行中添加一个元素的结束标记（或者只是 >）

<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 样式。

Answer 2

只需添加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>

如何让 link div 填充导航容器？

How can I make the link divs to fill the navigation container?

html

css

web-deployment