导航栏按钮顶部和侧面的间隙

Question

我正在创建一个网站，但遇到了一个小问题，但令人非常恼火。

我正在创建一个导航栏，导航栏的按钮在最左侧和屏幕顶部之间有一个间隙。换句话说，所有按钮都与顶部有一个间隙，而最左边的按钮与屏幕左侧有一个间隙。

我的样式表的相关部分如下所示。

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}

.navbar_base {
    width: 100%;
    overflow: hidden;
    background-color: rgb(0, 21, 144);
    top: 0px;
    color: white;
    display: block;
}

.navbar_button {
    float: left;
    padding: 10px;
    margin: 0px;
    border-radius: 3px;
    list-style-type: none;
}

.navbar_button:hover {
    background-color: rgb(50, 64, 147);
}

我怀疑这是因为我已将类分配给列表而不是链接，但我使用 MVC5 并将类添加到 Html.Actionlink() 很麻烦。如果可能的话，我想避免这种解决方案。

此外，我尝试在 ul 上分配 margin: 0px 和 padding: 0px，如下所示：

ul .navbar_button {
    margin: 0px;
    padding: 0px;
}

无济于事

此外，我目前对使用 Bootstrap 不感兴趣，因为这是针对特定人的一种副项目，我想为他创建一些独特的东西。

这是我的代码的 HTML 部分：

<div class= "navbar_base">
    <ul>
        <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
        <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
    </ul>
</div>

我也查看了以下问题，但答案对我没有帮助。

Gap at top of page despite margin:0 and padding: 0

Why does this div have gaps at top and bottom

如何消除这两个差距？

注意：我确实意识到我仍然是初学者，MVC 可能超出了我的范围，但我很快就有工作要做，我认为学习如何使用 MVC 的最快方法是实际上做 MVC

Answer 1

<div class= "navbar_base">
<ul>
    <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
    <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
</ul>

默认情况下ul有一些margin left属性，你可以通过

      .navbar_base > ul{ margin-left:0px; }

Answer 2

您还需要从 ul 中删除边距和填充（您尝试这样做将其从 li 中删除）

body, ul {
  margin: 0px;
  padding: 0px;
  font-family: Arial;
}

.navbar_base {
  width: 100%;
  overflow: hidden;
  background-color: rgb(0, 21, 144);
  top: 0px;
  color: white;
  display: block;
}

.navbar_button {
  float: left;
  padding: 10px;
  margin: 0px;
  border-radius: 3px;
  list-style-type: none;
}

.navbar_button:hover {
  background-color: rgb(50, 64, 147);
}

<div class="navbar_base">
  <ul>
    <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
    <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
  </ul>
</div>