展开<li>以使其符合<ul>的宽度

Question

在您说这篇文章是重复之前，它不是 - 所有其他主题提供了有关如何使<li>适合<ul>宽度的说明 - 我的问题是如何使垂直 <li>符合<ul>的宽度。

以下是我的代码：

CSS

.ul {
    background: #fff;
    padding: 12px !important;
    font-size: 0;
    width: 125px;
}

.li {
    margin-bottom: 16px !important;
}

.li a {
    font-weight: 300 !important;
    font-size: 22px !important;
}

HTML

<ul>
<li>
<a href="#">Hats</a>
</li>

目前，我只能点击文本末尾的li，但我希望选项可以在ul的整个宽度中选择它。

Answer 1

扩展我的评论......

您希望找到<li>元素适合其<ul>元素宽度的方法。但<li>元素实际上已经它的父元素的全部内容（默认填充除外，可以覆盖）。

这是因为<li>默认为block元素。块元素占用其父元素的整个宽度。您的问题实际上是<a>元素，默认情况下是inline元素，不占用其父元素的整个宽度。

通过将<a>从display: inline修改为display: block，这实际上解决了您的问题。