html - html/css - 如何将关闭按钮放在圆形背景中

Question

我正在尝试将 X 完全放在圆圈内，但由于某种原因，我无法让它们相互匹配，请参见下文

html:

    <div class="messages">
    <span class="closebtn dot" onclick="this.parentElement.style.display='none';">×</span>
        {% for message in messages %}
            <span><li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li></span>
        {% endfor %}
    </div>

CSS：

.messages {
    position: sticky;
    width: 235px;
    z-index: 1;
    float: right;
    border-radius: 1px;
    margin: 0 20px;
}

.closebtn {
    color: #535353;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    margin: -25px 0 0 -10px;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

标签： htmlcsswebbrowser-control

Answer 1

.dot只需在您的课程中添加这个额外的 CSS

 .dot {
     text-align: center;
     line-height: 25px;
  }