我正在使用 CSS/HTML。我正在使用 Bootstrap 4。
在一行選單中，我希望框的大小與字體大小相同。我將邊距和填充設定為 0。
.menu-ppal {
display: inline;
line-height: 16px;
box-sizing: content-box;
}
.menu-ppal li {
display: block;
padding: 0 10px 0 0;
box-sizing: content-box;
}
.menu-ppal-text a {
display: inline;
text-decoration: none;
margin: 0;
padding: 0;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
font-weight: 700;
background: #d6dbdf;
color: #111a21;
text-align: center;
text-transform: uppercase;
}<nav class="menu-ppal">
<ul class="nav flex-column flex-md-row ">
<li class="nav-item menu-ppal-text">
<a class="nav-link" href="#">Actus</a>
</li>
</ul>
</nav>如果我閱讀開發者工具，字體大小為16px，填充和邊距為0，但模型框為50.4333×21
我在不同的地方有相同的行為......
uj5u.com熱心網友回復：
AFAIK，沒有辦法動態地做到這一點。我剛剛添加position: absolute并設定了一個更小的height.
.menu-ppal {
display: inline;
line-height: 16px;
box-sizing: content-box;
}
.menu-ppal li {
display: block;
padding: 0 10px 0 0;
box-sizing: content-box;
}
.menu-ppal-text a {
display: inline;
text-decoration: none;
margin: 0;
padding: 0;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
font-weight: 700;
background: #d6dbdf;
color: #111a21;
text-align: center;
text-transform: uppercase;
position: absolute;
height: 14px;
}<nav class="menu-ppal">
<ul class="nav flex-column flex-md-row ">
<li class="nav-item menu-ppal-text">
<a class="nav-link" href="#">Actus</a>
</li>
</ul>
</nav>你會注意到頂部還有一個像素，那里還有一些背景
uj5u.com熱心網友回復：
好吧，我找到了答案！在我的 css 檔案的開頭，我呼叫了 Google api 字體。我從我試圖復制的網站復制了這個電話：
@import url( http://fonts.googleapis.com/css?family=Oxygen:400,300,700 );
這是相當古老的（七年），而且，通過這個古老的呼叫，效果正是我所希望的......而且，使用我的瀏覽器的 Developper 工具，我讀到它是古老的，我使用了谷歌的新版本：
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
而且，有了那個，我就有了丑陋的效果！
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320829.html
標籤：html css 推特引导 bootstrap-4