Question

我正在尝试开发一个可以响应屏幕大小的网页。但是，我无法想办法做到这一点，并用链接div填充导航div。我有一个下面的屏幕截图和代码。小屏幕尺寸和链接div也存在问题。我希望div与屏幕一起缩小，而不是叠加在一起。至少到一定程度。有关这方面的信息也会有所帮助。此外，解释为什么这些事情发生有帮助，所以如果你喜欢。那么请告诉。 enter image description here

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像素边框（1px左边和1px右边），它太宽了。包含边框（或填充和边距）的最佳方法是calc()函数，因此请使用calc(25% - 2px)。下一个问题是div之间的空白区域。它们在那里是因为元素之间的空格/换行符。只需在下一个元素的行中添加一个元素的结束标记（或者只是添加>）

<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>

如何使链接div填充导航容器？

2 个答案: