Question

我尝试创建与Angular Material库（https://material.angular.io/components/chips/overview）中出现的“ chip”元素相似的元素。

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

我有一个小x（字体大小：10像素），它与文本内联。我想将x放大（大约18像素或20像素），但是当我尝试放大它时，我再也无法使其与文本对齐（文本下拉）这是我的代码：

Rule 19/63: (157.4/60.3, lift 4.0)  
Rule accuracy - 0.615
 -> Predicted Class Four

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

非常感谢谁可以帮助我。

Answer 1

使用padding定位X时，如果更改任何大小（无论是字体大小还是任何父/子元素的大小），都将无法正确缩放。尝试根据分配给X的字体大小来更改最后一个值（padding-left）。在这种情况下，请将padding: 2px 5px 0px 6px更改为padding: 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>

Answer 2

您可以尝试使用display:flex作为“选择项”，它将使x图标和文本保持同一行且中间垂直。关于x图标，我删除了填充和边距；您只需使用 text-align：center 和 line-height 使其居中

 .selection-choice {
  float: left;
  padding: 0 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;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selection-choice-remove {
  border: 1px white solid;
  margin: 0;
  padding: 0;
  height: 20px;
  width: 20px;
  color: white;      
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 16px;
}
.selection-choice .text{
	padding:5px 7px 
}

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

也许对您有用。

Answer 3

现在它的font-size等于18px;

.selection-choice {
    float: left;
    padding: 0px 15px 5px 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 {
    text-align: center;
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px auto 0px ;
    color: white;
    width: 20px;
    height: 20px;
     line-height: 18px;
    border-radius: 100%;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 18px;
}

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

某些自定义<li>和<span>标记中的垂直对齐问题

3 个答案: