Question

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

我试图申请：

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

但这没有任何改变。即使width:100%;元素li也不做任何事情。如何让列表跨越unordered list的宽度？

＆＃13;

.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 {}
}

＆＃13;

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

＆＃13;

注意：您还可以看到当您将鼠标悬停在每个链接左侧的空白区域时，链接会变为白色。

修改：道歉，忘记提及当我的屏幕调整大小时，我的垂直导航栏将转换为水平导航栏。我已更新我的代码以显示此内容。

Answer 1

您需要从li和.nav-link中删除左边距：

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

请注意，您要删除.nav-link上的边距：

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

但你稍后会把它添加回去。

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

有关样式故障排除的小提示 - 如果您正在使用Chrome，请打开开发人员控制台，选择您的元素并将“样式”标签更改为“已计算”，然后您将能够具体查看正在使用的样式应用于您正在使用的元素（然后追溯它们以找出应用它们的内容）。当你有多个样式声明在同一个元素上相互覆盖时，它会让你更容易排除故障：）

Answer 2

您有margin-left: 15px应用于.nav-link，这会导致您的问题，只需将其更改为左边的填充并删除margin-left上的.nav li ul，请参阅此小提琴： https://jsfiddle.net/f2fc0r1q/

Answer 3

您的代码使用了一些重复，只需要稍微调整一下。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

列表元素不包含整个ul

4 个答案: