如何将flex布局的pill标签容器内的图标向左调整位置

实现方法 #

你的需求核心是缩小图标和pill标签左侧边框的间距，有两种简单的实现方案：

方案1：调整a标签的左侧内边距（更推荐）

当前.healthy a设置了padding: 4px 12px，左右两侧内边距都是12px，你可以直接减小左侧内边距的数值即可让内容整体左移：

.healthy a {
  /* 其他样式保持不变，只修改padding属性 */
  padding: 4px 12px 4px 5px; /* 四个值分别对应上、右、下、左内边距，左内边距数值可根据需求微调 */
}

同时建议补充样式清除p标签的默认外边距，避免多余间距影响对齐效果：

.template-pill p {
  margin: 0;
}

方案2：给图标添加负左外边距

如果你不想修改a标签的内边距，也可以直接给图标设置负的左外边距，抵消掉部分左侧内边距的占位：

.pill-icons {
  /* 其他样式保持不变，新增下面一行 */
  margin-left: -7px; /* 数值越小，图标左移距离越大，可根据实际效果调整 */
}

两种方案都可以实现你要的效果，优先推荐方案1，不会出现元素溢出容器的潜在问题。

内容的提问来源于stack exchange，提问作者Tony Hoan Trinh