我正在嘗試實作一個可折疊的側邊欄，并且我想要一個帶有用戶名首字母的圓圈（現在非常標準）。
目前我得到了這個鋸齒狀的“圓圈”：
這是想要的結果：
我一直在閱讀舊問題（比如這個）和他們的答案，但我沒有找到任何解決方案。
現場 JSFIDDLE 演示
我想這里有問題：
.userInitials {
height: 32px;
width: 32px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: white;
color: #193D4C;
}
任何幫助將不勝感激
uj5u.com熱心網友回復：
是的，您的圓元素正在被 flex 顯示縮小。使用flex-shrink:0. 您也可以為您的元素設定display:flex和justify-content:center;align-items:center;。像這樣的東西：
.userInitials {
height: 38px; /* increase height */
flex-shrink:0; /* add property, value 0 so no srhink */
display:flex;align-items:center;justify-content:center; /*center the initials */
width: 38px; /* increase width */
text-align: center;
vertical-align: middle;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: white;
color: #193D4C;
}
uj5u.com熱心網友回復：
嘗試將最小和最大寬度設定為 32px .userInitials
另外我建議做一些改變：
- 修改下一個
div（后一個span）：
align-items: flex-start !important;
width: 100%;
justify-content: space-between;
- 修改
div持有staff-nameand 的staff-position：
width: 100%;
- 修改人字形：
remove margin-left or set it to a value between 3 and 10 px
這是修改后的演示
我已添加.staff-nav-holder以使其更易于修改。希望它有所幫助。
uj5u.com熱心網友回復：
您是否嘗試將邊框半徑設定為 px 值，它通常使用您設定的正方形像素的一半來作業。
在這種情況下使用 border-radius: 16px
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339163.html