导航栏按钮顶部和侧面的间隙 [英] Gaps at the top and side of navigation bar buttons

问题描述

我正在创建一个网站，但遇到了一个较小但令人难以置信的令人毛骨悚然的问题.

I'm creating a website and have run into a minor but incredibly infuriating problem.

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

I'm creating a Navigation bar and the buttons of the navigation bar have a gap between the far left, and top of the screen. In other words, all buttons have a gap from the top and the leftmost button has a gap from the left of the screen.

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

The relevant parts of my Stylesheet are shown below.

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

I suspect it's because I have assigned the class to the list rather then the links, but I'm using MVC5 and adding classes to the Html.Actionlink() is cumbersome. I'd like to avoid this solution if possible.

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

Furthermore I've tried assigning margin: 0px and padding: 0px on ul like so:

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

无济于事

我现在对使用Bootstrap也不感兴趣，因为这是特定人的辅助项目，我想为他创建一个独特的东西.

Also I am not interested in using Bootstrap at the moment because this is a sort of side project for a specific person and I would like to create something unique for him.

这是我的代码的HTML部分:

Here is the HTML portion of my code:

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

我也查看了以下问题，但是答案并没有帮助我.

I've looked at the following questions as well, but the answers didn't help me.

尽管有余量:0，页面顶部的间隙和填充:0

为什么该div顶部和顶部之间存在间隙底部

如何摆脱两个空白?

注意:我确实意识到我仍然是一个初学者，MVC可能不在我的研究范围之内，但是我有工作要做，因此我认为学习MVC的最快方法是:实际上做 MVC

Note: I do realize I am still a beginner and MVC may be out of my scope but I have job to do soon and I reckoned the fastest way to learn about how to do MVC is to actually do MVC

推荐答案

<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具有一些剩余的边距属性，您可以通过以下方式将其删除

By default ul has some margin left properties , you can remove it by

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

这篇关于导航栏按钮顶部和侧面的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！