我正在制作一個像這樣的簡單選單
<div className="main-menu">
<ul>
<li className="main-menu__app-menu"><a href="#">link 1</a></li>
<li className="main-menu__app-menu"><a href="#">link 2</a></li>
<li className="main-menu__app-menu"><a href="#">link 3</a></li>
<li className="main-menu__user-menu"><a href="#">link 4</a></li>
<li className="main-menu__user-menu"><a href="#">link 5</a></li>
</ul>
</div>
用這個 css
.main-menu {
border-bottom: 1px solid #000000;
& > ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
& > li {
display: inline;
border: 1px solid #FF0000;
height: 50px;
& > a {
display: block;
text-align: center;
padding: 1.4rem 1.6rem;
color: #000000;
text-decoration: none;
&:hover {
color: #808080;
}
}
}
}
&__app-menu {
float:left;
}
&__user-menu {
float:right;
border: 1px solid #000000;
border-radius: 1.5rem;
margin: 0 .1rem;
}
}
兩個 __user-menu 鏈接有一個邊框，但如果我降低它的高度，鏈接將保持固定并且不會顯示在按鈕的中間。
我應該在哪里設定高度以使標簽高度始終居中？
uj5u.com熱心網友回復：
您已將填充設定為 padding: 1.4rem 1.6rem;在頂部和底部添加 1.4rem，因此如果您嘗試降低高度，它不會被填充占用。
用這個替換它：
padding: 0 1.4rem 0rem 1.4rem;
這確保您僅在元素的左側和右側有 1.4rem 填充。
還要確保您已插入* {box-sizing: border-box;} CSS 代碼之上。:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351438.html