html - CSS使内联 block 填充父级

Question

我正在尝试将 SVG 图标和一些文本放在菜单的同一行上。 我已将 display 从 block 更改为 online-block 但文本不再填充父级。 当我尝试悬停菜单中的元素时出现问题，它仅在文本上激活，而我想要在整个行上。

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

svg {
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align:middle;
}

li a {
    display: inline-block;
    color: #000;
    padding: 8px 0px 8px 16px;
    text-decoration: none;
    vertical-align:middle;
    white-space: normal;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

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

HTML部分

<ul id="menu">
        <li><svg viewBox="0 0 24 24">
            <path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
            </svg><a class="menux1" href="www.google.com">Home</a></li>
</ul>

Answer 1

我稍微改变了 HTML 的结构，结果是这样的:

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

svg {
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align:middle;
}

a li {
    color: #000;
    padding: 8px 0px 8px 16px;
    text-decoration: none;
    vertical-align:middle;
    white-space: normal;
}

a.active {
    background-color: #4CAF50;
    color: white;
}

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

a { text-decoration: none; }

<ul id="menu">
        <a class="menux1" href="www.google.com"><li><svg viewBox="0 0 24 24">
            <path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
            </svg>Home</li></a>
</ul>