html - 到底是什么导致宽度比我网页上的宽度大？

Question

我真的不确定这里发生了什么。我已经注释掉了我怀疑会出现的代码区域，确保它不是一个小故障，这里显然有一些我没有看到的东西。希望你们中的一位网页设计专家能在这里帮助我。

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

我已经尝试将 overflow-x 设置为 hidden 来修复它，问题是当我这样做时 overflow-y 似乎自动设置为 auto 而不是 visible 并且当我手动将它设置为可见。

http://jsfiddle.net/jg10vzcx/

Answer 1

罪魁祸首是 .sub-text 元素。它是 block 级段落元素，默认宽度为 100%。您使用 left: calc(50% - 15vw) 定位它以便将其居中。这样做时，它会延伸到视口(viewport)之外(因为它的宽度为 100%)，并且会创建一个水平滚动条。

您可以删除 left 定位并简单地向元素添加 text-align: center 以使其居中。

Updated Example

.sub-text {
    position: relative;
    margin-top: 2vh;
    /* left: calc(50% - 15vw); */
    font-size: 2vw;
    text-transform: uppercase;
    text-shadow: 0 0 1vw black;
    text-align: center;
}