如何移除左上角图标？解决移除图标无法顶部对齐问题

问题1：移除左上角的图标 #

从你给出的代码来看，已经给.skills li设置了list-style: none，按道理应该能去掉默认的列表项图标了。如果还是有图标残留，大概率是这两种情况：

• 你的<li>标签内部嵌套了额外的图标元素（比如带图标类的<i>、<span>），直接删除这个元素就能解决；
• 图标可能是通过CSS伪元素（:before/:after）生成的，你可以在样式里添加这段代码来清除：

.skills li:before, .skills li:after {
  content: none;
}

另外也可以检查下父元素有没有继承的列表样式，确保.skills ul没有额外设置list-style相关属性（你已经给ul设了padding: 0，这步没问题）。

问题2：将移除图标对齐到顶部 #

你的.skills li设置了固定高度height: 31px和padding-top: 7px，如果移除图标是行内/行内块元素，很容易出现垂直对齐偏差。可以试试这几种方案：

1. 用Flex布局简化对齐：把.skills li改成flex容器，直接让内容垂直对齐到顶部，同时保留原有布局效果：

.skills li {
  /* 保留你原来的其他样式，替换或补充以下属性 */
  display: flex;
  align-items: flex-start; /* 强制顶部对齐 */
  height: auto; /* 去掉固定高度，让内容撑开容器，也可保留高度配合align-items */
  padding: 7px 10px; /* 统一上下内边距，原padding-bottom为0可按需调整 */
}

2. 单独调整图标的垂直对齐：如果不想修改整体布局，给移除图标元素添加专属样式：

/* 假设移除图标是.skills li内的.delete-icon类 */
.skills li .delete-icon {
  vertical-align: top;
  margin-top: 0; /* 清除可能存在的上边距 */
}

3. 修正li的内边距与高度匹配：你原来的padding-top: 7px加上height: 31px，实际内容区域可用高度为24px，若图标高度超过这个值就会错位。要么把height设为auto让li自适应内容，要么调整padding和height的数值使其匹配。

另外提个小建议：用float: left做标签布局可能会遇到清除浮动的问题，换成Flex布局在兼容性和维护性上会更优哦。

内容的提问来源于stack exchange，提问作者Mr world wide