我正在嘗試使用引導程式創建一個容器。我在容器頂部添加了一個名稱和一個按鈕作為一行，添加了背景顏色，并為容器添加了邊框。但是，邊框比行稍寬，因此在右側，邊框與行斷開連接，如果您愿意，也不會完成“視窗”。添加了一張圖片和我的代碼。
<div
class="container"
style="border-radius: 5px; border: 2px solid #98bcdb;border-top-style: hidden; "
>
<div
class="row"
style="
background-color: #337ab7;
border: 3px solid #337ab7;
border-radius: 5px 5px 0px 0px;
color: white;
height: 40px;
padding: 5px;
"
>
<div class="col-6">
Dokumenty
</div>
<div
class="col-6"
style="
display: flex;
justify-content: flex-end;
align-items: baseline;
"
>
<i class="fa-solid fa-plus"></i>
P?ipojit soubor
</div>
</div>
<br />
</div> 
起初邊界在頂部也是斷開的，但我洗掉了邊界的頂部。它看起來稍微好一點，但右側仍然斷開連接。
uj5u.com熱心網友回復：
我只花了 10 分鐘試圖弄清楚為什么container邊框設定為 2px，但顯示為 1.9px，這在它和它的子元素之間產生了 1px 的間隙。結果我把瀏覽器的縮放設定為 90%。也許這也是你的問題？否則它看起來很好：
.container
{
border-radius: 5px;
border: 2px solid #98bcdb;
overflow: hidden; /* added to hide square corners of the child */
}
.row
{
background-color: #337ab7;
border: 0px solid #337ab7;
/* border-radius: 5px 5px 0px 0px;*/
color: white;
height: 40px;
padding: 5px;
}
.col-6.right
{
display: flex;
justify-content: flex-end;
align-items: baseline;
}<div
class="container"
>
<div
class="row"
>
<div class="col-6">
Dokumenty
</div>
<div
class="col-6 right"
>
<i class="fa-solid fa-plus"></i>
P?ipojit soubor
</div>
</div>
<br />
</div>Also note, I removed border rounding for the child, because it produced different radius than parent, instead I'm hiding overflow in the container
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450678.html
上一篇：如何讓盒子之間有均勻的空間？