Html 如何制作<；a>；标签的高度为<；李>；要素

我正在努力使我的

我已尝试给出我的

在第二张照片上，我剪掉了这张照片并放大了，这样你们可以看得更清楚

我在另一个堆栈溢出线程中找到了一个答案，您可以给出
显示：table
，给出
高度：0
，然后给出
高度：100%
，但它对我不起作用

请注意，IM使用的是BOOTSTRAP 4.0.0alpha和SASS（SCSS）

HTML

<div class="topContact hidden-md-down">
        <div class="container">
            <div class="row">
                <ul class="contactInfo">
                    <li class="d-inline-block"><a href=""><i class="far fa-envelope"></i>info@reen.com</a></li>
                    <li class="d-inline-block"><i class="fas fa-mobile-alt"></i>+00 (123) 456 78 90</li>
                </ul>

                <ul class="socialIcons ml-auto">
                    <li class="d-inline-block"><a href=""><i class="fab fa-facebook-f"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-google-plus-g"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-twitter"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-pinterest-p"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-behance"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-dribbble"></i></a></li>
                </ul>
            </div>
        </div>
     </div>

}
为了使子元素假定为父元素的100%高度，必须设置父元素的大小。仅为
元素的
一个{display:block
或
内联块
；
最小高度：100%
}应用样式
一个{display:block；}
并检查我已尝试给出
显示块，但它不起作用
li{padding:0}
谢谢这部作品，我给了我的
显示器：block
和
padding:10px 5px
。很高兴它有帮助！我注意到您使用的是像素单位。对于不同的屏幕，这将无法很好地进行缩放。我建议您使用
em
单位，尽管此时可能需要您更改整个设计。只想补充一点，最好将元素改为块，并让它拉伸
元素，而不为
元素定义高度。
.topContact{
background-color: #f5f7fa;
border-bottom: 1px solid #e6e9ed;
ul{
    padding:0px 15px 0px 15px;
    margin:0;
}
a:hover{
    background: indigo;
}
a{
    height: 100%;
}
.contactInfo li,
.contactInfo a,
.socialIcons a{
    font-size: 10pt;
    color: #506a85;

}
.contactInfo a:hover{
    text-decoration: none;
    color: #00bc9c;

}
.contactInfo svg,{
    margin-right: 8px;
}
.contactInfo li{
    padding-right: 20px;
}     

<style type="text/css">
    ul#socialIcons, ul#socialIcons>li { margin:0px; padding:0px; list-style:none; }
    ul#socialIcons>li>a { display:block; font-size:1em; margin:0px; padding:0.5em; }
</style>