asp.net 当我将鼠标指针悬停在链接上时,如何填充导航栏的高度?

pepwfjgg  于 2022-12-30  发布在  .NET
关注(0)|答案(4)|浏览(150)

这里我设计我的个人项目的网页。我有这个导航栏添加到我的网站,其中我希望填写在导航栏中的链接完全当我把鼠标指针悬停在这些链接。在这里我附上了我得到的截图。

导航栏的html代码

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
            <div class="container" style="overflow:auto">
                <a class="navbar-brand" asp-area="" asp-page="/Index">BookStore</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Books/Index">Books</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

导航栏后面的CSS:

html {
  position: relative;
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #cccccc;
  margin: 0;
  /*margin-bottom: 60px;*/
}

nav {
    background-color: #8080ff;
    margin: 0px;
    position: absolute;
}

.navbar-nav {
    height: 100%;
    margin: 0;
}

注:我正在Visual Studio 2022中使用ASP.NET设计Web应用程序。
尝试更改nav类、body类、html类的边距属性。尝试将height属性设置为100%。但没有任何效果!!

ozxc1zmp

ozxc1zmp1#

对于nav元素,应将padding设置为0px

nav {
  background-color: #8080ff;
  margin: 0px;
  position: absolute;
  padding: 0px !important;
}
ijnw1ujt

ijnw1ujt2#

    • 这就是"!important是什么意思"的答案**

CSS中的!important规则用于增加属性/值的重要性。
事实上,如果您使用!important规则,它将覆盖该元素上该特定属性的所有以前的样式规则!

    • 示例:**
#id {
  background-color: blue;
}

.class {
  background-color: gray;
}

p {
  background-color: red !important;
}

或者它将优先CSS属性。!重要的有最高的优先级比什么都重要。

v9tzhpje

v9tzhpje3#

添加填充:0 px!对CSS中的导航选择器很重要

rt4zxlrg

rt4zxlrg4#

遵循以下代码

<style>
    li.nav-item{
        display: contents;
        padding: 12px;
        margin-right: 12px;
        top: 0;
        position: absolute;
    }
    li.nav-item a{
        margin-right: 12px;
        
    }
    li.nav-item a:hover{
        background-color: #cccccc;
        /* display: contents; */
        padding: 16px;
        top: 0;
        /* position: absolute; */
    }
  
    html {
      position: relative;
      min-height: 100%;
      margin: 0;
    }
    
    body {
      background-color: #cccccc;
      margin: 0;
      /*margin-bottom: 60px;*/
    }
    
    nav {
        background-color: #8080ff;
        margin: 0px;
        position: absolute;
        width: 100%;
    }
    
    .navbar-nav {
        height: 100%;
        margin: 0;
    }
    ul{
        margin-left: 60px !important;
    }
</style>

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
    <div class="container" style="overflow:auto">
        <a class="navbar-brand" asp-area="" asp-page="/Index">BookStore</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Books/Index">Books</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

相关问题