CSS对齐问题：如何让邮箱与Call Us文本按指定黑线对齐？

需求：让联系方式中的“Call Us :”和“Email :”按照指定黑线对齐。

当前实现代码 #

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="footer-info">
  <h3 class="footer-title">Contact Us</h3>
  <ul class="footer-adress">
    <li>
      <i class="fa-solid fa-location-dot"></i>
      <span>House 1, Road 3, Section 6, Mirpur, Dhaka 1216</span>
    </li>
    <li>
      <i class="fa-solid fa-phone"></i>
      <span>
        Call Us :<br />
        <span>
          <a href="tel:+88 01740-214622" class="white_color">
          +88 01740-214622,
          </a>
        </span>
        <span>
          <a href="tel:+88 01912-137844" class="white_color">
          +88 01912-137844
          </a>
        </span>
      </span>
    </li>
    <li>
      <i class="fa-solid fa-envelope"></i>
      <span>Email : info@sagatom.com, sagatom2u@gmail.com</span>
    </li>
  </ul>
</div>

CSS代码 #

.footer-info{
  width: 16%;
}

.footer-info .footer-title {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 22px;
    text-transform: uppercase;
    padding-left: 35px;
}

.footer-info .footer-adress {
    list-style-type: none;
    margin: 0px;
}

.footer-info .footer-adress li {
    float: left;
    width: 100%;
    margin: 0;
    display: table;
    padding: 5px 0px;
}

.footer-info .footer-adress li>i {
    padding-right: 8px;
}

.footer-info .footer-adress li span {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
}

解决方案 #

核心思路是拆分标签与内容容器，通过固定标签宽度实现对齐，具体步骤如下：

1. 修改HTML结构 #

给每个联系方式的标签（Call Us:/Email:）和内容分别添加独立容器，方便控制布局：

<div class="footer-info">
  <h3 class="footer-title">Contact Us</h3>
  <ul class="footer-adress">
    <li>
      <i class="fa-solid fa-location-dot"></i>
      <span>House 1, Road 3, Section 6, Mirpur, Dhaka 1216</span>
    </li>
    <li>
      <i class="fa-solid fa-phone"></i>
      <div class="contact-wrap">
        <span class="contact-label">Call Us :</span>
        <span class="contact-content">
          <a href="tel:+88 01740-214622" class="white_color">+88 01740-214622,</a>
          <br>
          <a href="tel:+88 01912-137844" class="white_color">+88 01912-137844</a>
        </span>
      </div>
    </li>
    <li>
      <i class="fa-solid fa-envelope"></i>
      <div class="contact-wrap">
        <span class="contact-label">Email :</span>
        <span class="contact-content">info@sagatom.com, sagatom2u@gmail.com</span>
      </div>
    </li>
  </ul>
</div>

2. 更新CSS样式 #

使用Flex布局实现标签固定宽度对齐，同时优化整体排版：

.footer-info{
  width: 16%;
}

.footer-info .footer-title {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 22px;
    text-transform: uppercase;
    padding-left: 35px;
}

.footer-info .footer-adress {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-info .footer-adress li {
    display: flex;
    align-items: flex-start;
    padding: 5px 0;
    width: 100%;
}

.footer-info .footer-adress li>i {
    margin-right: 8px;
    margin-top: 2px;
}

.footer-info .footer-adress .contact-wrap {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 24px);
}

.footer-info .footer-adress .contact-label {
    flex: 0 0 70px;
    font-size: 14px;
    line-height: 24px;
}

.footer-info .footer-adress .contact-content {
    flex: 1;
    font-size: 14px;
    line-height: 24px;
}

实现说明 #

• 给标签设置固定宽度（flex: 0 0 70px），确保所有标签占据相同水平空间，自然实现对齐
• 用Flex替代原Table布局，更适配多行内容的排版需求，避免图标垂直偏移
• 调整容器宽度计算，保证内容区域占满剩余空间，排版更紧凑

内容的提问来源于stack exchange，提问作者Hasib Hosen