如何使填充不可点击

Question

这是代码，当我把它放在代码padding: 0 0 0 400px;中时，点击包含填充的整个字段：

.navbar ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
.navbar li {
  padding: 10px;
  float: left;
}
.navbar ul li a {
  font-size: 20px;
  float: left;
  display: block;
  padding: 0 0 0 400px;
  text-decoration: none;
  font-family: Bookman Old Style;
  color: #99ED09;
  font-size: 20px;
}

<div class="navbar">
  <ul>
    <li> <a href="link1.html" target="Here">Anime</a> 
    </li>
    <li> <a href="link2.html" target="Here">Movies</a> 
    </li>
  </ul>
</div>

Answer 1

我已将填充：0 0 0 400px; 替换为 margin：0 0 0 400px; 。

.navbar ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
.navbar li {
  padding: 10px;
  float: left;
}
.navbar ul li a {
  font-size: 20px;
  float: left;
  display: block;
  margin: 0 0 0 400px;
  text-decoration: none;
  font-family: Bookman Old Style;
  color: #99ED09;
  font-size: 20px;
}

<div class="navbar">
  <ul>
    <li> <a href="link1.html" target="Here">Anime</a> 
    </li>
    <li> <a href="link2.html" target="Here">Movies</a> 
    </li>
  </ul>
</div>

Answer 2

使用边距代替填充。

.navbar ul li a {
  font-size: 20px;
  float: left;
  display: block;
  margin: 0 0 0 400px;
  text-decoration: none;
  font-family: Bookman Old Style;
  color: #99ED09;
  font-size: 20px;
}

Answer 3

将父（ul）设置为position：relative，然后将position：absolute设置为子（li）元素

.navbar ul {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    position: relative;
}
.navbar li{
    position: absolute;
    right: 0;
    padding: 10px;
    display: inline-block;
}
.navbar ul li a{
    font-size: 20px;
    line-height: 20px;
    display:block;
    text-decoration: none;
    font-family: Bookman Old Style;
    color: #99ED09;
    font-size: 20px;
}

Answer 4

如果您的网站没有响应，那么只需更换＆＃39;填充：0 0 0 400px;＆＃39; ＆＃39;保证金：0 0 0 400px;＆＃39;