html - CSS - 背景颜色元素问题 - 圆圈显示为椭圆形

Question

我一直在努力让我的背景圆形元素变圆。

我有一个带有 X 的标签作为关闭按钮。

我将背景色放在 X 后面，所以我想在 X 后面创建一个圆圈。

我无法让圆圈变成圆圈，它显示为椭圆形。

.label {
  padding: 0 !important;
  list-style: none !important;
}

.label__choice {
  display: inline !important;
  padding: 10px;
  margin: 4px;
  color: #fff !important;
  background-color: #2ecc71;
  border: none;
  border-radius: 3px;
}

.label__choice__remove {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  padding: 3px;
  color: #2ecc71 !important;
  font-weight: 900;
  background-color: #fff;
  border: none;
  border-radius: 50%;
}

<ul class="label">
  <li class="label__choice">
    <span class="label__choice__remove">×</span> Lessons
  </li>
</ul>

这是我的 fiddle :https://jsfiddle.net/mmagL4p1/1/

我做错了什么？

Answer 1

尝试添加:

display: inline-block;
  line-height: 14px;
  text-align: center;

在 .label__choice__remove 内

主要问题是 span 是 inline 元素，因此宽度/高度不起作用`

这是更新的片段:https://jsfiddle.net/mmagL4p1/2/