如何让span占据div的整个高度

Question

我有这组应该用作选择器的跨度，所以我希望当用户将鼠标悬停在它们上方时它们占据它们周围的整个空间，但是我不知道如何操作，也无法找到答案。请帮忙，这是我的代码

.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;
}
.link  {
    background-color:LightGray;
    color:black;
    padding: 5px;
    font-size: 25px;
    overflow:hidden;
}

<div class="link"><b>
    
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Prehrana</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Pica</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Ciscenje  </span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Drugo</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Akcija</span>

</b></div>

跨度内的文本是克罗地亚语。这也是我在没有任何帮助的情况下制作的第一个网站，所以请不要取笑我。

Answer 1

.link 就像所有 .selectors 的容器，因此给它一个已知的高度，并通过将显示设置为 flex 使其成为 flex 容器

然后使跨度的显示为block或inline-block，因为它们默认为inline - 您可以设置它们的宽度、高度和全部。

然后您可以将所有跨度的高度设置为父高度的（100％）

像这样

 <style>
        .selector {
            cursor: pointer;
            padding-right: 40px;
            padding-left: 20px;
            display: inline-block;
            height: 100%;
            box-sizing: border-box;
        }
    
        .link {
            background-color: LightGray;
            color: black;
            padding: 5px;
            font-size: 25px;
            overflow: hidden;
            height: 50px; 
            display: flex; 
            align-items: center; 
        }
    
        .selector:hover {
            background-color: white;
        }
    </style>
    
    <div class="link">
        <b>
            <span class="selector">Prehrana</span>
            <span class="selector">Pica</span>
            <span class="selector">Ciscenje</span>
            <span class="selector">Drugo</span>
            <span class="selector">Akcija</span>
        </b>
    </div>