2 回答

TA貢獻1865條經驗 獲得超7個贊
兄弟,它正在工作??吹竭@個:-
.menulist {
background: white;
color: black;
font-family: 'Times New Roman', Times, serif;
transition: height .3s;
z-index: 9;
width: 100%;
}
.menulist .menulist-menu-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 8px;
justify-content: flex-start;
position: relative;
}
.menulist .menulist_nav {
padding-left: 0;
list-style: none;
font-size: 14px;
line-height: 1.71;
font-weight: normal;
margin: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: stretch;
height: 100%;
}
.menulist_bottom_border {
border-bottom: 2px solid;
border-color: gray;
margin-left: 20px;
}
<header class="menulist">
<div class="menulist-menu-bar">
<div>
<ul class="menulist_nav">
<div class="menulist_bottom_border">nav1</div>
<div class="menulist_bottom_border">nav2</div>
<div class="menulist_bottom_border">nav3</div>
</ul>
</div>
</div>
</header>
您看到了意想不到的事情,因為只有一個 div 具有類菜單列表底部邊框。由于大多數 elems 具有 flex display 屬性,所以它看起來像那樣。

TA貢獻1893條經驗 獲得超10個贊
正如我所理解的,你的問題解釋了我可能對你有幫助的想法。
文本和邊框底部之間的填充是因為
line-hight: 1.71;
圖像中顯示的黃色填充是因為在 class 上應用了填充
menulist-menu-bar
。
如果您想刪除其中任何一個,那么您可以使用這些值來獲得所需的輸出。
添加回答
舉報