用相同的一個和兩個字符創建一個圓形按鈕？

-3

我想創建一個按鈕，它具有與所有其他按鈕一樣的尺寸和外觀。但一個按鈕將只包含一個字符，如M，其中一些將包含XL或XS。我現在的問題是，我怎麼能讓它們看起來一樣？用相同的一個和兩個字符創建一個圓形按鈕？

在下圖中可以看到三個按鈕。右邊的兩個按鈕具有相同的CSS設置。但一個按鈕比另一個大，因爲中間的按鈕只包含一個字符，右邊的兩個字符...

如果我現在調整中間按鈕的CSS設置讓它再次看起來圓，按鈕越來越小...所以，現在我的問題是，如何創建一直具有相同尺寸的按鈕，如果它們包含一個或兩個字符，那麼它們是無間斷的？

enter image description here

親切的問候

來源

2017-08-30 Erik

能否請你加你現在正在使用的HTML和CSS。 –

添加一些'width'和'height'（相同的值）並添加'border-radius'。使用flex或table屬性使內容中心對齊。 –

span { 
 
    width: 50px; 
 
    border-radius: 25px; 
 
    color: #fff; 
 
    background: #26AEF2; 
 
    display: inline-block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-size: 14px; 
 
}

<span>S</span> 
 
<span>XS</span> 
 
<span>XL</span> 
 
<span>XXL</span> 
 
<span>XXXL</span>

來源

2017-08-30 13:13:58 anu

你的問題還不清楚，但我要去嘗試：

把每一個<button>在單獨<div>或<span>
風格<div>或<span>具有固定的寬度和高度

來源

2017-08-30 13:17:16

你的答案不清楚？ – anu

修復了@slacker –

用相同的一個和兩個字符創建一個圓形按鈕？

回答

相關問題