将鼠标悬停在X上方

Question

我正在努力将一个完美的圆圈直接定位在＆＃34; X＆＃34;在悬停时。如何做到这一点？

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这比设置填充更好，因为它更通用。里面的文字可能会改变，但布局不会破坏（圆圈实际上是一个圆圈）。

Answer 2

尝试在左右两侧给出相等的填充：

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