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()添加类很麻烦。如果可能的话，我想避免这种解决方案。

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

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

您也需要从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>

Answer 2

<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有一些左边距属性，你可以通过

删除它

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

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

2 个答案: