我想加寬我的側邊欄，因為我的專案沒有正確定位。
這是一張圖片，如下： 在此處輸入圖片說明
HTML
<ng-icon-sidebar>
<ul>
<li>
<a href="#">
<span class="icon-container">
<i class="material-icons">account_balance_wallet</i>
</span>
<div class="linkMenu">Sélection Portefeuille</div>
</a>
</li>
<li>
<a href="#">
<span class="icon-container">
<i class="material-icons">trending_up</i>
</span>
<div class="linkMenu">Corporate Actions</div>
</a>
</li>
<li>
<a href="#">
<span class="icon-container">
<i class="material-icons">account_balance</i>
</span>
<div class="linkMenu">Indices Boursiers</div>
</a>
</li>
<li>
<a href="#">
<span class="icon-container">
<i class="material-icons">currency_exchange</i>
</span>
<div class="linkMenu">Devises</div>
</a>
</li>
<li>
<a href="#">
<span class="icon-container">
<i class="material-icons">input</i>
</span>
<div class="linkMenu">Tableau de valeurs</div>
</a>
</li>
</ul>
</ng-icon-sidebar>
我認為問題出在 CSS 中。
.ng-icon-sidebar {
background-color: #01b0f1;
margin-top: 98px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 256px;
}
.ng-icon-sidebar .icon-container {
align-items: center;
display: flex;
height: 48px;
justify-content: center;
width: 48px;
color: #fff;
}
.ng-icon-sidebar .linkMenu {
color: #fff;
font-size: 26px;
padding-left: 25px;
}
a {
align-items: center;
display: flex;
text-decoration: none;
}
我的代碼在這里Stackblitz。訪問是test1。
資訊：
選單 HTML 代碼位于 Views > Home > home.component.html
CSS 在檔案中styles.css。
預先感謝您的幫助和您的時間。
uj5u.com熱心網友回復：
請結帳 sidebar/sidebar.component.ts。在那里你可以看到側邊欄的寬度在打開時被定義為 256px。
第 34-37 行：
.ng-icon-sidebar--opened {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
width: 256px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338625.html
標籤：css