CSS 视口宽度加起来不等于 100vw

Question

我正在使用以下代码创建一行 <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 视口宽度。因此，应该有足够的 space 来容纳所有 5 个。

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

CSS 视口宽度加起来不等于 100vw

CSS viewport width does not add up to 100vw

html

css

viewport-units