Question

似乎锚固定在垂直导航的左侧，但仅适用于第二个元素++，第一个元素工作正常。当我将光标移动到最左侧（空白区域）时，它会突出显示该链接并能够单击它。仍然不知道造成这种情况的原因。

我为我的网站的某个部分制作了一个布局页面，允许有一个带有导航列表的垂直导航侧边栏。它仍固定在左侧。我没有问题让这个侧栏上的锚点工作但是一旦我开始设计它们（例如文本对齐正确或字体大小更改）链接的锚点仍然卡在左侧或不能通过后者列表中的第一项。

.left-sidebar{

  position:fixed;
  top:auto;
  left:0;
  width:20%;
  height:100%;
  background-color: #3d2c2e;
  list-style-type: none;
  overflow: auto;
}

.left-sidebar ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: JosefinSans-Light;
}

.left-sidebar li a{
    display: inline-block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    color: white;
}

.left-sidebar li{
    font-size: 30px;
    text-align: right;
    margin-bottom: 10px;
}


.left-sidebar li a.active{

    color: white;
}

.left-sidebar li a:hover:not(.active){
    background-color: #555;
    color:white;
}

打扰一下，如果这是一个初学者问题，CSS不是我的强项，并且自昨晚以来一直试图寻找解决方案。提前谢谢。

修改HTML：

<div class="left-sidebar">
     <ul>
         <li><a href="#">item1</a></li>
         <li><a href="#">item2</a></li>
         <li><a href="#">item3</a></li>
     </ul>
</div>

编辑2：我正在使用ASP.NET MVC 5来创建布局，通过将主要布局复制粘贴到特定布局并添加上面的div。两种布局中没有相同的css属性。

编辑3：我从layout1中删除了所有复制的代码，并将其替换为页面顶部的剃刀布局表达式。仍然没有按预期工作。

Answer 1

.left-sidebar li a{
    display: inline-block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    color: white;
    width: 100%;
}

将width: 100%;用于列表（li）类型中的锚点（a）标记

锚点未在垂直导航栏

1 个答案: