我有以下代碼，我想將徽標（圖片）和一個塊對齊，其中包括用戶名、他的級別和進度條。并為此使用了 flex，但它吃掉了我的進度條，我該怎么做才能使錯誤欄的寬度為 100%？
<div class="class" id="user">
<img src="user.svg">
<div>
<h2>username</h2>
<h2> Уровень </h2>
<div id="container">
<div id="progress"> 80% </div>
</div>
</div>
</div>
頁面的CSS：
#user {
display:flex;
}
#container {
background-color: white;
width: 100%;
}
#progress{
background-color: #fd6a72;
width: 100%;
}
uj5u.com熱心網友回復：
給你的元素一些寬度。
#user {
display: flex;
align-items: center;
}
#container {
background-color: white;
width: 100%;
}
#progress {
background-color: #fd6a72;
width: calc(100vw - 25px - 8px);
height: 20px;
}
img{
height:25px;}<div class="class" id="user">
<img src="https://via.placeholder.com/25">
<div>
<h2>username</h2>
<h2> Уровень </h2>
<div id="container">
<div id="progress"> 80% </div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532019.html
標籤：htmlcss
上一篇：CSS-HTMLFlexbox：如何在不創建另一個盒子的情況下添加樣式
下一篇：JS密碼強度檢查器