CSS 中电子邮件图标和电子邮件文本之间的空格。如何将电子邮件 ID 文本移至右侧？

Question

如何将我在联系信息中给出的电子邮件文本移动到右侧，邮件图标和邮件 ID 文本之间有一些间隙，如剩余的 github，以文本对齐方式链接。

.contactInfo {
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 3px solid rgba(251, 249, 249, 0.943);
}

.title {
  color: rgb(78, 154, 116);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.contactInfo ul {
  position: relative;
  padding-top: 15px;
}

.contactInfo ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
  margin: 10px 0;
}

.contactInfo ul li .icon {
  width: 30px;
  font-size: 30px;
  color: rgb(84, 152, 125);
  padding-left: 25px;
}

.contactInfo ul li span {
  color: #dbd8d8;
  font-size: 20px;
  padding-left: 50px;
}

.contactInfo ul li p {
  padding:0px  50px;
  font-size: 20px;
}

.contactInfo ul li text {
  padding-left: 80px;
  position: absolute;
}

.contactInfo ul li a {
  color: rgb(243, 239, 239);
  font-size: 20px;
  padding-left: 30px;
}

我需要将我的电子邮件 ID 文本移动到正确的邮件 ID 图标，就像我对 github 和 linkedin 所做的那样

Answer 1

为此，我猜绝对不会起作用，因为这是最糟糕的代码实践。你可以使用flexbox。

关于你的例子，你可以尝试这个。 我假设您有左侧图像的图标类和右侧文本的文本类

.contactInfo ul li
{
    display:flex;
    column-gap:20px;
}
.contactInfo ul li icon
{
      width: 30px;
  font-size: 30px;
  color: rgb(84, 152, 125);
}
.contactInfo ul li text
{
    position:relative;
}

希望它有效:)