Question

我正在尝试在菜单的同一行放置SVG图标和一些文字。我已将display从block更改为online-block，但文字不再填充父级。当我尝试hover菜单中的某个项目时，会出现此问题，它仅在文本上激活，我想要整个row。

#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的结构，这就是结果：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS使内联块填充父级

1 个答案: