將鼠標懸停在圓上X

Question

我試圖在鼠標懸停時將一個完美的圓形直接放在「X」上。如何使這項工作？

.select2-selection__clear { 
 
\t font-size:20px; 
 
\t padding-right:10px; 
 
} 
 

 
.select2-selection__clear:hover { 
 
\t background-color:#000; 
 
\t color:#FFF; 
 
\t width:20px; 
 
\t height:20px; 
 
\t -moz-border-radius: 20px; 
 
\t -webkit-border-radius: 20px; 
 
\t border-radius: 20px; 
 
}

<span class="select2-selection__clear">×</span>

Answer 1

這樣：

.select2-selection__clear { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    border-radius: 20px; 
 
} 
 

 
.select2-selection__clear:hover { 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<span class="select2-selection__clear">×</span>

這是不是設置填充更好，因爲它更具有普遍性。裏面的文字可能會改變，但佈局不會中斷（而圓圈實際上是一個圓圈）。

Answer 2

嘗試在給予相等的填充左，右：

.select2-selection__clear { 
    font-size:20px; 
    padding-right:5px; 
    padding-left:5px; 
}