<ul> 标签向左移动？

Question

我正在制作一个网站，但没有得到我想要的东西。我制作了一个 div，它将位于网站的右侧，宽度为 200px。然后我做了一个来显示带有列表的链接。问题是，其中的任何元素都会稍微向左移动，就好像其中有一个向右填充，但实际上没有，而且我不知道这是从哪里来的。

.nav-menu>ul {

  margin-bottom: 1rem;

}

.nav-menu>ul>li {

  text-decoration: none !important;

  list-style: none !important;

  outline: none !important;

  border-bottom: 1px solid red;

}

.nav-menu>ul>li>a {

  letter-spacing: 1px;

  text-transform: uppercase;

  text-align: left;

  font-weight: 400;

  display: block;

  line-height: 45px;

  color: #999;

  font-size: 12px;

}

.lnr {

  font-size: 20px;

  padding-right: 10px;

  position: relative;

  top: 3px;

}

<nav class="nav-menu">

  <ul>

    <li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>

    <li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>

    <li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>

    <li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>

    <li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>

    <li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>

  </ul>

</nav>

Answer 1

在你的 css 中添加这个：body,html{&nbsp; border:0;&nbsp; padding:0;&nbsp; margin:0;}body,html {&nbsp; border: 0;&nbsp; padding: 0;&nbsp; margin: 0;}.nav-menu>ul {&nbsp; margin-bottom: 1rem;}.nav-menu>ul>li {&nbsp; text-decoration: none !important;&nbsp; list-style: none !important;&nbsp; outline: none !important;&nbsp; border-bottom: 1px solid red;}.nav-menu>ul>li>a {&nbsp; letter-spacing: 1px;&nbsp; text-transform: uppercase;&nbsp; text-align: left;&nbsp; font-weight: 400;&nbsp; display: block;&nbsp; line-height: 45px;&nbsp; color: #999;&nbsp; font-size: 12px;}.lnr {&nbsp; font-size: 20px;&nbsp; padding-right: 10px;&nbsp; position: relative;&nbsp; top: 3px;}<nav class="nav-menu">&nbsp; <ul>&nbsp; &nbsp; <li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>&nbsp; &nbsp; <li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>&nbsp; &nbsp; <li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>&nbsp; &nbsp; <li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>&nbsp; &nbsp; <li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>&nbsp; &nbsp; <li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>&nbsp; </ul></nav>