Ширина окна просмотра CSS не составляет до 100vw

Я создаю ряд <div> элементы, использующие следующий код: HTML:

.row_1_element{
  text-align:center;
  font-size:3vw;
  width:20vw;
  float:left;
}
<div id="row_1">
  <div class="row_1_element">
  Menu 
  </div>

  <div class="row_1_element">
  user 
  </div>

  <div class="row_1_element">
  profile
  </div>

  <div class="row_1_element">
  ?
  </div>

  <div class="row_1_element">
  ?
  </div>
<div>

Проблема в том, что все 5 <div> элементы не помещаются в один ряд по экрану, вместо этого 4 помещаются, а пятый переходит в следующий ряд. Это не имеет большого смысла, если 1vw составляет 1/100 ширины области просмотра, так как 5 *(20/100) = 100/100 ширины области просмотра. Поэтому должно быть достаточно места для всех 5 из них.

1 ответ

Решение

Вы должны удалить поля по умолчанию со страницы, если ваш контент охватывает все 100%:

body {
    margin: 0;
}

.row_1_element {
    text-align:center;
    font-size:3vw;
    width:20vw;
    float:left;
}
<div id="row_1">
  <div class="row_1_element">
  Menu 
  </div>

  <div class="row_1_element">
  user 
  </div>

  <div class="row_1_element">
  profile
  </div>

  <div class="row_1_element">
  ?
  </div>

  <div class="row_1_element">
  ?
  </div>
<div>

Другие вопросы по тегам