html - 某些自定义 和 标签中的垂直对齐问题

Question

我尝试创建一个类似于 Angular Material 库 (https://material.angular.io/components/chips/overview) 中的“chip”元素的元素。

我要构建的元素有一个充当容器的 li 标签，在这个元素中，我插入两个 span 标签，一个包含文本，另一个包含使用户能够删除的“x”整个芯片。

我有一个与文本内联的小 x(字体大小:10px)。我想让 x 变大(大约 18 像素或 20 像素)，但是当我尝试放大它时，我无法再将它与文本对齐(文本下拉)这是我的代码:

.selection-choice {
    float: left;
    padding: 0px 15px 0px 5px;
    background-color: rgb(102, 0, 204);
    color: white;
    height: 28px;
    border-radius: 14px;
    font-size: 13px;
    box-sizing: border-box;
    display: list-item;
    list-style: none;
    line-height: 15px;
    font-family: sans-serif;
}


.selection-choice-remove {
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px 5px 0px 6px;
    height: 75%;
    color: white;
    width: 20px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 10px;
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span>EXAMPLE</span>
</li>

非常感谢谁能帮助我。

Answer 1

当您使用 padding 定位 X 时，如果您更改任何大小(无论是字体大小还是任何父/子元素的大小)，它都不会正确缩放。尝试根据分配给 X 的字体大小更改最后一个值 (padding-left)。在这种情况下，将 padding: 2px 5px 0px 6px 更改为 填充:2px 5px 0px 4px。您还可以向文本添加一个类并为其指定 position: relative 并相应地定位它。

.selection-choice {
    float: left;
    padding: 0px 15px 0px 5px;
    background-color: rgb(102, 0, 204);
    color: white;
    height: 28px;
    border-radius: 14px;
    font-size: 13px;
    box-sizing: border-box;
    display: list-item;
    list-style: none;
    line-height: 15px;
    font-family: sans-serif;
}

.text {
    position: relative;
    bottom: 1px;
}

.selection-choice-remove {
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px 5px 0px 4px;
    height: 75%;
    color: white;
    width: 20px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 17px;
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span class="text">EXAMPLE</span>
</li>