[英]How to add circle with number on ion card header
我試圖制作一些帶有編號的卡片(里面有數字的圓圈),但似乎有問題。 我不能讓它成為圓形和中心
這是我的一些代碼,
<ion-card-header style="padding:0px;border-bottom:1px solid #9c9c9c;">
<ion-row>
<ion-col class="numberCircle">1</ion-col>
<ion-col>John Doe</ion-col>
<ion-col>Posting</ion-col>
</ion-row>
</ion-card-header>
css
.numberCircle {
border-radius: 50%;
width: 25px;
height: 25px;
padding: 4px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 12px Arial, sans-serif;
}
將數字放在另一個元素中並居中會更容易
ion-row.row { padding: 5px 26px; justify-content: space-between; } ion-row.row ion-col { flex-grow: 0; }.numberCircle { border-radius: 50%; width: 25px; height: 25px; display: inline-flex; background: #fff; border: 2px solid #666; flex-grow: 0; padding: 0; }.numberCircle span { color: #666; text-align: center; font: 12px Arial, sans-serif; width: 25px; display: inline-block; margin: auto; }
<ion-card-header style="padding:0px;border-bottom:1px solid #9c9c9c;"> <ion-row> <ion-col class="numberCircle"> <span> 1 </span> </ion-col> <ion-col>John Doe</ion-col> <ion-col>Posting</ion-col> </ion-row> </ion-card-header>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.