html - 高度不适用于 li 元素

Question

我正在尝试水平实现 LI 元素，如屏幕截图所示，但是我无法增加 li 元素的高度。我尝试创建一个类并将其分配给 li 项，但似乎仍然无效。尝试将高度应用于 UL 元素，但似乎仍然无效。有人可以告诉我问题出在哪里吗？

html

<div id="navcontainer">
    <ul class="liheight">
        <li class="liheight"><a href="#">Team Management</a></li>
        <li class="liheight"><a href="#">User Management</a></li>

    </ul>
</div>

CSS

#navcontainer ul {
    display: block;
    list-style-type: disc;
     padding-top:40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

#navcontainer ul li { 


    display: inline;
    border:5px solid #009ddc;
    border-left: 5px solid #009ddc;
    border-right: 5px solid #009ddc;
    border-bottom:5px solid #009ddc;
    border-top:5px solid #009ddc;
    z-index: 0 !important;
    padding: 0;

}

    #navcontainer ul li a {
        text-decoration: none;
        padding: .1em 1em;
        background: #fff;
        color: #24387f !important;
    }

#navcontainer ul li a:hover
{
color: #fff !important;
background-color:  #009ddc;
}

.liheight {
   min-height: 50px;
}

期望的高度

当前实现

应用解决方案

Answer 1

第一个答案解释了它，但如果你真的想在 li 元素上保持“内联”，那么只需添加 line-height: 25px，或类似的东西。它会增加行高，从而增加 li 元素的高度。