列表元素不包含整个ul

Question

我有一个简单的列表设置在一个无序列表中。我想列表元素跨越整个宽度的ul，但我似乎无法弄清楚为什么我的方法不起作用。

我曾尝试申请：

nav ul li { 
    margin: 0; 
    padding: 0; 
} 

但是，这改变不了什么。即使width:100%;到li元素也不做任何事情。我如何获得列表以跨越unordered list的宽度？

.nav-container { 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #f4f3f3; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
nav:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.nav-link { 
 
    display: block; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0px; 
 
    padding-left: 15px; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
} 
 

 
.nav ul { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0px; 
 
} 
 

 
.nav ul li { 
 
    margin-left: 5px; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav ul li a { 
 
    text-align: left; 
 
    padding: 5px; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 15px; 
 
} 
 

 
.nav li:hover a { 
 
    color: #f4f3f3; 
 
} 
 

 

 
/* QUERIES */ 
 

 
@media screen and (max-width: 540px) { 
 
    .nav-container { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #f4f3f3; 
 
    border-bottom: 0.5px solid #f4f3f3; 
 
    } 
 
    .nav-link { 
 
    padding: 10px; 
 
    } 
 
    .logo-holder { 
 
    overflow: hidden; 
 
    display: block; 
 
    margin: auto; 
 
    width: 40%; 
 
    } 
 
    .nav-container nav ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    } 
 
    .logo-holder { 
 
    text-align: left; 
 
    } 
 
    #navigation-div { 
 
    background-color: #f4f3f3; 
 
    margin-top: 0; 
 
    } 
 
    .hide { 
 
    display: none; 
 
    } 
 
    .nav ul li {} 
 
}

<div class="nav-container"> 
 
    <div class="logo-holder"> 
 
    <img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" /> 
 
    </div> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul class="nav-ul"> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

注意：您还可以看到，当你将鼠标悬停在每个链接左侧的空白处，链接变成白色。

编辑： 道歉，忘了提，当我的屏幕大小调整，我的垂直导航栏会转换成水平导航栏。我已更新我的代码以显示此内容。

Answer 1

您需要从Li和.nav链接删除左边距：

.nav-link { 
    display: block; 
    text-align: left; 
    color: #333; 
    text-decoration: none; 
    margin-left: 0px; 
    padding-left: 15px; 
} 

但你：你在.nav链接这里去除余量

.nav ul li, 
.nav-link { 
    margin-left: 0; 
} 

注稍后再添加它。

.nav-link { 
    text-align: left; 
    padding: 5px; 
    color: #333; 
    text-decoration: none; 
    margin-left: 15px; 
} 

稍尖故障排除造型 - 如果你正在使用Chrome，打开开发者控制台，选择您的元素，改变“样式”选项卡“计算”，你就可以看到具体什么风格被应用到您正在使用的元素（然后追溯它们以找出应用它们的内容）。这使得它更容易一些，当你有潜在的多个样式声明覆盖彼此相同的元素:)

Answer 2

上解决你有一个margin-left: 15px应用于.nav-link，这会导致您的问题，只需将其更改为填充左和在.nav li ul删除margin-left，看到这个小提琴： https://jsfiddle.net/f2fc0r1q/

Answer 3

代码中使用一些重复，它只是需要一点点调整。

.nav-container { 
 
    background-color: #f4f3f3; 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
.nav ul { 
 
    box-sizing: border-box; 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
.nav li { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav-link { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    padding: 5px 5px 5px 15px; 
 
    line-height:15px; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
}

<div class="nav-container"> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

Answer 4

就这么简单，你.nav-link和.nav ul li有margin-left价值。通过删除它们或使它们为0会给你所需的输出。

.nav-container { 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #f4f3f3; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
.nav-link { 
 
    display: block; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0px; 
 
    padding-left: 15px; 
 
} 
 

 
.nav ul { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0px; 
 
} 
 

 
.nav ul li { 
 
    width: 100%; 
 
    margin-left: 0; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav-link { 
 
    text-align: left; 
 
    padding: 5px; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
} 
 

 
.nav li:hover a { 
 
    color: #f4f3f3; 
 
}

<div class="nav-container"> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>