Question

我正在为自己创建一个投资组合网站，并且我不想为此使用任何外部UI库。我想制作一个“容器”，页面左右边缘有2.5vw的余量。内部内容的宽度为95vw。在800像素下进行测试时，内部内容的宽度确实为760像素。但是左边距似乎在4-4.5vw之间，右边距0.5-1vw之间。 Chrome浏览器检查器显示的唯一边距是每边20像素，这是不正确的。

我尝试将整个车身宽度设置为95vw，边距设置为0 2.5vw。我也尝试过取出导航栏宽度，调整其位置（不知道为什么要测试它，因为我希望在整个站点上使用它）。我已经在Chrome，Firefox和Opera上打开了文件，每个文件的结果相同。

这是前几行的HTML。

<body>
    <div class="container">
      <nav class="top-nav">
        <ul class="nav-list">
          <li><a href="#">Home</a></li>

以及随附的CSS。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: yellow;
}

.container {
  background-color: blue;
  width: 95vw;
  margin: 0 2.5vw;
}

.top-nav {
  background: green;
  opacity: 0.1;
  position: fixed;
  top: 0;
  left: 2.5vw;
  width: 95vw;
}

我期望2.5vw（左边界）95vw（宽度）2.5vw（右边界），但是越来越接近4.5vw（左边界），95vw（宽度），0.5vw（右边界）。就其价值而言，转换为百分比确实可以，但是我想尽可能使用相同的单位。

Answer 1

您的样式似乎还可以。

可能您有其他未发布样式的问题

看到您的代码正在工作：

    <div class="container">
      <nav class="top-nav">
        <ul class="nav-list">
          <li><a href="#">Home</a></li>
          </ul>
          </nav>
          </div>

name

大众汽车为何不在集装箱上产生对中结果？

1 个答案: