创建导航栏时的额外空间

Question

我正在尝试使用CSS创建导航栏。加载HTML时，左侧还有一个额外的空间。您能否帮助我确定可能出什么问题。

/* Navigation Bar Properties */

.navigation {
  background-color: #404040;
  border-radius: 5px;
  height: 35px;
  line-height: 35px;
}

.navigationText {
  list-style-type: none;
}

.navigationText li {
  display: inline;
}

.navigationText li a {
  text-decoration: none;
  color: white;
  padding: 7px;
  font-size: 17px;
  font-family: Verdana;
}

.navigationText li a:hover {
  color: #000;
  background-color: white;
}

<div class="navigation">
  <ul class="navigationText">
    <li><a href=''>Home</a></li>
    <li><a href=''>Questions</a></li>
    <li><a href=''>Contact</a></li>
  </ul>
</div>

理想情况下，我希望主页按钮放置在左侧，没有任何空格。 任何输入

谢谢

Answer 1

只需在ul属性值的padding内容周围删除空格：

.navigationText {
  padding: 0;
  list-style-type: none;
}