HTML/CSS:未知的"Box"出现在导航栏旁边

Question

所有列表项都能正常工作[光标在家里因此颜色会发生变化]虽然左侧有这个额外的"盒子",或者你想要的任何东西.

我不明白为什么这会出现在导航栏的左侧,我希望将其删除,但我不知道该怎么做.

.nav {
  background: #2c3e50;
  -webkit-columns: 7;
  -moz-columns: 7;
  columns: 7;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
  list-style-type: none
}
.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}
html,
body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  margin: 0px;
}

<ul class="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">History</a>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Results</a>
  </li>
  <li><a href="#">Pictures</a>
  </li>
  <li><a href="#">Links</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Answer 1

默认情况下,无序列表左侧有填充以防止文本与项目符号重叠.添加padding: 0;到您的导航CSS.

.nav {
  background: #2c3e50;
  -webkit-columns: 7;
  -moz-columns: 7;
  columns: 7;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
  list-style-type: none;
  padding: 0;
}
.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}
html,
body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  margin: 0px;
}

<ul class="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">History</a>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Results</a>
  </li>
  <li><a href="#">Pictures</a>
  </li>
  <li><a href="#">Links</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>