Question

我正在通过创建本网站来练习html / css，但是目录列表中的链接左右两侧都有一些空白。我添加了完整列表编码方式的html代码示例。

我尝试将所有元素的边距和填充设置为零，但没有任何效果。

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 20% 80%;
  margin: 0;
}

.nav_bar {
  min-height: 100vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}
.nav_bar ul {
  display: block;
  padding: 5px;
  list-style: none;
  font-size: 0;
  margin: 0;
}

.nav_bar li {
  padding: 10px 5px;
  border-bottom: 2px solid black;
}

<div class="container">
    <div class="nav_bar">
        <h3>JS DOCUMENTATION</h3>
        <ul class="nav_list">
            <li>
                <a href="page.html#introduction">Introduction</a>
            </li>
        </ul>
    </div>
</div>

enter image description here

Answer 1

您已将padding赋予了ul标签，这就是该行未触及两个极端的原因。

只需将padding中的ul更改为0

这是您要寻找的东西吗？我添加了颜色以显示问题发生的位置

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 40% 30%;
  margin: 0;
  padding:0;
}

.nav_bar {
  min-height: 100vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

h3 {
  padding: 10px 5px;
}

 ul {
  display: block;
  padding: 0px;
  font-size: 0;

  margin: 0;
}


 li {
  padding: 10px 5px;
  border-bottom: 2px solid black;
}

 li:first-child {
  border-top: 2px solid black;
}

 a {
  text-decoration: none;
  color: black;
  font-size: 18px;

  font-weight: 300;
}

<div class="container" style="background-color:green;">
  <div class="nav_bar" style="background-color:lightblue;">
    <h3 style="background-color:red;">JS DOCUMENTATION</h3>
    <ul style="background-color:pink;" class="nav_list">
      <li>
        <a href="page.html#introduction">Introduction</a>
      </li>

Answer 2

您是否期望这样：

注意：在全屏模式下检查我的答案

#drop-down{
padding-inline-start:0;  /*use this css */
}

HTML：

  <ul class="nav_list" id="drop-down">   <!-add id="drop-down" to ul-->
    <li>
     <a href="page.html#introduction">Introduction</a>
    </li>
  </ul>

#drop-down {
  padding-inline-start: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 20% 80%;
  margin: 0;
}

.nav_bar {
  min-height: 100vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

.nav_bar h3 {
  padding: 10px 5px;
}

.nav_bar ul {
  display: block;
  padding: 5px;
  list-style: none;
  font-size: 0;
  margin: 0;
}

.nav_bar li {
  padding: 10px 5px;
  border-bottom: 2px solid black;
}

.nav_bar li:first-child {
  border-top: 2px solid black;
}

.nav_list a {
  text-decoration: none;
  color: black;
  font-size: 18px;
  font-weight: 300;
}

<div class="container">
  <div class="nav_bar">
    <h3>JS DOCUMENTATION</h3>
    <ul class="nav_list" id="drop-down">
      <li>
        <a href="page.html#introduction">Introduction</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

假设您是指list items上的填充（您目前在CSS中没有使用该填充），则可以执行以下操作；

.nav_list li {
  padding-left: 0;
  padding-right: 0;
}

这将删除list item中每个unordered list的左侧和右侧的填充。

还请注意，在您的问题中，您尚未将所有填充都设置为0。

.nav_bar ul {
  display: block;
  padding: 5px;
  list-style: none;
  font-size: 0;
  margin: 0;
}

如果这不是我们期望的行为，请确保也将unordered list的填充设置为0。

如何删除不需要的空格

3 个答案: