Pavel Marian Pavel Marian - 4 months ago 15
HTML Question

CSS make inline-block fill parent

am trying to put a

SVG
icon and some text on the same line in a menu.
I've changed the
display
from
block
to
online-block
but the text doesn't fill the parent any more.
The problem occurs when I try to
hover
an item from the menu, it activate only on a text and I want on the entire
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;
}


The
HTML
part

<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

I've changed the structure of the HTML a bit, this is the result:

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

Comments