Как я могу сделать div div для заполнения контейнера навигации?

Question

Я пытаюсь разработать веб-страницу, которая может реагировать на размер экрана. Однако я не могу понять, как это сделать, и заполнить Nav div разделителями ссылок. У меня есть снимок экрана ниже и код, чтобы следовать. Также существует проблема с небольшими размерами экрана и разделителями ссылок. Я бы хотел, чтобы divs сжимались на экране и не складывались друг на друга. По крайней мере, до определенного момента. Информация об этом также будет полезна. Кроме того, объяснение того, почему это происходит, очень помогает, если вам нравится. Тогда, пожалуйста, скажите.

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

Просто добавьте 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>

Answer 2

Вот JSFiddle

25% будет соответствовать, но так как вы добавляете 2 пикселей границы (1px влево и 1px справа) к вашему div, он слишком широк. Лучшим способом включения границы (или заполнения и поля) является функция 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 для разных размеров экрана.