元素看起来有偏移，但没有应用偏移

Question

我开始学习 HTML、CSS 等东西。我刚刚创建了一个新网站来测试不同的东西。

到目前为止，我在顶部有导航选项卡，它们可以正常工作。

但整个列表看起来只是从屏幕左侧偏移，即使没有应用任何水平偏移开始。

这是我正在谈论的内容的屏幕截图：

如您所见，带有页面链接的整个栏从左侧偏移，而在右侧看起来很正常。

这是用作样式表的我的 CSS 代码：

body {
    background-color: white;
}

ul {
    list-style-type: none;
    margin: 10;
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4CAF50;
    color: white;
}

我完全不知道是什么原因造成的。

Answer 1

默认情况下，浏览器会在 body 上留一个边距。尝试将此添加到您的 CSS:

body {
    margin: 0;  /* Add margin: 0 */
    background-color: white;
}

要么是那个，要么就是你 ul 的边距。尝试将其 CSS 更改为：

ul {
    list-style-type: none;
    margin: 0; /* Instead of 10 */
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

body {
    background-color: white;
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4CAF50;
    color: white;
}

<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">null</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">null</a>
  </li>
</ul>

Answer 2

我认为您需要在正文中添加 margin:0 并在 CSS

中添加 html

html{
margin:0;
}

body{
margin:0;
}

元素看起来有偏移，但没有应用偏移

Elements look offset, yet no offset is applied

html

css

web

web-testing