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

  border:0;

  padding:0;

  margin:0;

}

body,

html {

  border: 0;

  padding: 0;

  margin: 0;

}

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