我嘗試了很多不同的方法來將酒吧放在離子中心，但沒有任何效果。有誰知道如何解決這個問題？
我需要將條粘貼在中間，以便在不同設備上下載應用程式時，條將保持在中間
.searchbar{
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
border-radius: 90px;
//position
position:sticky;
margin-top: 10px;
}
.morepagebutton{
width: 36px;
height: 36px;
border-radius: 50%;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25);
//button position
position: absolute;
margin-left: 312px;
margin-top: 3px;
//vector size & position
font-size: 29px;
padding: 1px;
}
ion-toolbar {
--background: #383E56;
height: 77px;
width: 500px;
}<ion-footer>
<ion-toolbar>
<div class="searchbar">
<button class="morepagebutton" (click)="toMorePage()">
<ion-icon name="ellipsis-horizontal"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-footer>uj5u.com熱心網友回復：
不建議對寬度使用固定值，但您可以使用彈性框來執行此操作：
.searchbar {
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 25%);
border-radius: 30px;
-webkit-position: sticky;
position: sticky;
display: flex;
justify-content: end;
padding: 3px 6px;
margin: auto;
}
.morepagebutton{
width: 36px;
height: 36px;
border-radius: 50%;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
font-size: 29px;
display: flex;
align-items: center;
justify-content: center;
}
ion-toolbar {
--background: #383E56;
height: 77px;
}
ion-footer ion-toolbar:last-of-type {
display: flex;
align-items: center;
justify-content: center;
}
<ion-footer>
<ion-toolbar>
<div class="searchbar">
<button class="morepagebutton" (click)="toMorePage()">
<ion-icon name="ellipsis-horizontal"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-footer>
uj5u.com熱心網友回復：
您可以制作ion-toolbar一個網格并使用justify-content. 由于您設定的寬度，工具列不在螢屏中央ion-toolbar。
.searchbar {
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
border-radius: 90px;
//position
position: sticky;
margin-top: 10px;
}
.morepagebutton {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25);
//button position
position: absolute;
margin-left: 312px;
margin-top: 3px;
//vector size & position
font-size: 29px;
padding: 1px;
}
ion-toolbar {
--background: #383E56;
height: 77px;
width: 500px;
/* Added */
display: grid;
justify-content: center;
}<ion-footer>
<ion-toolbar>
<div class="searchbar">
<button class="morepagebutton" (click)="toMorePage()">
<ion-icon name="ellipsis-horizontal"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-footer>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489190.html
上一篇：角度數字范圍（打字稿）
下一篇：使用角度顯示或隱藏元素的邏輯