列表元素不包含整个ul
问题描述:
我有一个简单的列表设置在一个无序列表中。我想列表元素跨越整个宽度的ul
,但我似乎无法弄清楚为什么我的方法不起作用。列表元素不包含整个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>
注意:您还可以看到,当你将鼠标悬停在每个链接左侧的空白处,链接变成白色。
编辑: 道歉,忘了提,当我的屏幕大小调整,我的垂直导航栏会转换成水平导航栏。我已更新我的代码以显示此内容。
答
您需要从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,打开开发者控制台,选择您的元素,改变“样式”选项卡“计算”,你就可以看到具体什么风格被应用到您正在使用的元素(然后追溯它们以找出应用它们的内容)。这使得它更容易一些,当你有潜在的多个样式声明覆盖彼此相同的元素:)
答
上解决你有一个margin-left: 15px
应用于.nav-link
,这会导致您的问题,只需将其更改为填充左和在.nav li ul
删除margin-left
,看到这个小提琴: https://jsfiddle.net/f2fc0r1q/
答
代码中使用一些重复,它只是需要一点点调整。
.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>
答
就这么简单,你.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>
感谢方便的技巧呢! – Freddy
不用担心。乐于帮助! – delinear