如何通过CSS实现与示例一致的类表格列表布局效果？

我想要实现类表格外观（左列是固定宽度的标签如Age、Address，右列是对应内容，整体整齐对齐），当前效果是标签和内容没有规整对齐，视觉上比较杂乱。我已使用与目标示例完全相同的HTML结构，因此需要通过CSS来实现。我尝试过使用float/text-align属性，但不确定如何实现该效果。我参考了某个模板网站的效果。

我的HTML代码 #

<section id="about"> 
  <div class="container col-6"> 
    <div class="row"> 
      <div class="col-5 about-photo"> 
        <a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a> 
      </div> 
      <div class="col-7 about-text"> 
        <h1>I'm <span class="text-primary">Oliver Stott</span></h1> 
        <p>Web Design and Junior Web Developer</p> 
        <div class="col-8"> 
          <ul class="table"> 
            <li> 
              <span><strong>Age</strong></span> 
              <span>19</span> 
            </li> 
            <li> 
              <span><strong>Address</strong></span> 
              <span>1234 Street, W3 Island</span> 
            </li> 
            <li> 
              <span><strong>Email</strong></span> 
              <span>contact@domain.com</span> 
            </li> 
            <li> 
              <span><strong>Phone</strong></span> 
              <span>+0123 456 789</span> 
            </li> 
            <li> 
              <span><strong>Website</strong></span> 
              <span> 
                <a href="#">http://www.envato.com</a> 
              </span> 
            </li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
</section>

我的CSS代码 #

#about .container{ 
  background-color: #fff; 
  padding: 0; 
  height: auto; 
  margin: 20px auto; 
  text-align: center; 
  box-shadow: 0px 0px 40px -10px rgba(59,66,71,1); 
  border: 0.5px solid #72A7A3; 
} 
.about-photo{ 
  height: auto; 
  width: 100; 
} 
.table, h1, p{ 
  clear: both; 
  float: left; 
  padding-left: 0; 
} 
.about-text h1{ 
  padding-top: 20px; 
} 
.about-text p{ 
  padding-top: 10px; 
  font-size: 1.2rem; 
} 
.table li{ 
  text-align: left; 
  list-style-type: none; 
} 
span{ 
  padding-left: ; 
  text-align: right; 
}

解决方案 #

嘿，你已经有了正确的HTML结构，只需要调整CSS就能实现那种规整的类表格两列对齐效果啦！我帮你调整一下样式，用Flex布局来实现会比float更灵活可控：

修改后的CSS代码

#about .container{ 
  background-color: #fff; 
  padding: 0; 
  height: auto; 
  margin: 20px auto; 
  text-align: center; 
  box-shadow: 0px 0px 40px -10px rgba(59,66,71,1); 
  border: 0.5px solid #72A7A3; 
} 
.about-photo{ 
  height: auto; 
  width: 100%; /* 修复语法错误，补上百分号 */
} 
/* 移除不必要的float，统一标题和描述的对齐方式 */
.about-text h1, .about-text p {
  padding-left: 0;
  text-align: left; /* 让标题和描述左对齐，和下方列表视觉统一 */
}
.about-text h1{ 
  padding-top: 20px; 
} 
.about-text p{ 
  padding-top: 10px; 
  font-size: 1.2rem; 
} 
.table {
  padding-left: 0;
  margin: 0;
}
.table li{ 
  list-style-type: none; 
  display: flex; /* 用Flex布局让两个span在一行排列 */
  justify-content: space-between; /* 让两个span分别靠左右两端对齐 */
  margin-bottom: 8px; /* 给每个列表项添加间距，提升美观度 */
}
/* 给左侧标签设置固定最小宽度，确保所有标签对齐整齐 */
.table li span:first-child {
  min-width: 80px; /* 可根据实际需求调整这个宽度 */
  text-align: left;
}
.table li span:last-child {
  text-align: right;
  flex: 1; /* 让右侧内容占据剩余空间，避免内容过长时换行错位 */
}

关键修改说明

1. Flex布局替代float：用display: flex给每个<li>设置弹性布局，相比float更容易控制元素对齐，不会出现 clearfix 等问题；
2. 固定左侧标签宽度：给第一个<span>设置min-width，确保所有标签（Age、Address等）宽度一致，不会因为内容长短而错位；
3. 两端对齐：justify-content: space-between让标签和内容分别靠左右两端对齐，完美模拟表格的两列效果；
4. 修复语法错误：补上了about-photo中width: 100缺失的%；
5. 统一视觉对齐：调整标题和描述的对齐方式，让整体布局更协调。

这样修改之后，你的列表就会呈现出规整的类表格外观啦！

内容的提问来源于stack exchange，提问作者Oliver Stott