Question

我想知道如何使列表项的左侧和右侧可单击。在我的情况下，右侧是可点击的，但左侧不是。有什么帮助吗？

我的HTML

    <body>
    <aside id = "aside">
    <div id="column">
        <ul >
        <li> <a href="">Dashboard</a></li>
        <button><li ><a href="">Catalog</a></button>
        <div id ="s"><ul>
        <a href=""><li><li id="list"> Catogeries</a></li>
        <li> <a href="">Departure Location</a> </li>
        <li><a href="" >Return Location </a></li>
        <li> <a href="">Cities </a></li>
        <li> <a href="">Vendor </a></li>
        <li><a href="">Discount Coupons</a></li>
        <li> <a href="">Remaining Seats </a></li>
        </ul>
        </div>
        </li>
        <button><li><a href="">Customers</a></button>
        <div id ="m"><ul >
        <li><a href="">Customers</a></li>
        <li><a href="">Orders</a></li>
        <li><a href="">Reward System</a></li>
        </ul>
        </div>
        </li>
        <li id="report"><a href="">Reports</a>
        <ul>
        <li><a href="">Monthly</a></li>
        <li><a href="">Comission Report</a></li>
        <li></li>
        </ul>
        </li>

        </ul>
    </div>
    </aside>
</body>

我的CSS

 #aside{
    margin-left: -70%;
    margin-top: -20%;
    background-color: grey;
    border-style: solid;
    width: 46%;
    color: white;
}
#aside ul li{
    list-style: none;
    padding-top: 10%;
    text-decoration: none;
}
#aside ul li a{
    text-decoration: none;
    color: white;
    font-family: Tahoma;
    display: block;

}

enter image description here

Answer 1

我想最简单的方法是通过将ul设置为padding-left来关闭0元素中的嵌套，然后根据级别在a元素上设置适当的填充。例如：

#aside ul a {
    padding-left: 10px;
}
#aside ul ul a {
    padding-left: 40px;
}
#aside ul ul ul a {
    padding-left: 70px;
}

小提琴：http://jsfiddle.net/46ho5aax/

Answer 2

这是可能的，您可以保持当前的外观。您需要做的是从UL和LI标记中删除边距和填充。然后将左边距添加到等于所需边距的标记。（可选）在CSS中，将A标记的显示设置为阻止整行，以使链接右侧的空白也可以点击。

这是一个快速的CSS块，可以满足您的需求：

ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style:none;
}
a {
  display:block;
  padding-left: 3rem;
}

如何使整个列表项可点击？

2 个答案: