HTML / CSS：未知＆＃34; Box＆＃34;出现在导航栏旁边

Question

所有列表项目都能正常运行[光标在家中因此颜色会发生变化]虽然有一个额外的＆＃34;框＆＃34;，或者你想要调用它的任何东西，存在于左侧。 / p>

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

您的<ul>元素具有默认填充。将padding:0添加到.nav类中删除它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

ul元素默认为padding-left。

.nav {
    padding-left: 0;
}

这将解决问题。