CSS视口宽度加起来不等于100vw [重复]答案

【问题标题】：CSS viewport width does not add up to 100vw [duplicate]CSS视口宽度加起来不等于100vw [重复]
【发布时间】：2017-09-19 23:20:02
【问题描述】：

我正在使用以下代码创建一行 <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 个适合，第 5 个进入下一行。如果 1vw 是视口宽度的 1/100，这毫无意义，因为 5 *(20/100) = 100/100 视口宽度。因此，应该有足够的空间容纳所有 5 个。

【问题讨论】：

这不是重复的，我的
标签在标签之外，因此在“为什么主容器上有垂直滚动？”中提供了答案。没有意义。此外，“为什么主容器上有垂直滚动”的名称也应该更改，因为我一生都找不到这个问题的答案。

标签： html css viewport-units

【解决方案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>

【讨论】：