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

问题描述

我试图将 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;
}

解决方法

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

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

,

你可以把所有的css放在.closebtn中，设置line-height为25px，text-align为center。

.closebtn {
    color: #535353;
    font-size: 30px;
    top: 5px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #bbb;
    border-radius: 50%;
}

<div class="messages">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    </div>