如何实现HTML列表项内部分内容的垂直对齐效果

调整方案 #

1. 修正HTML问题

同一页面内ID必须唯一，你给多个span设置了相同的middleText ID，需要统一改为class属性，修改后代码如下：

<ul>
  <li><strong>Distance</strong> <span class="middleText">40 miles</span></li>
  <li><strong>Elevation Gain</strong> <span class="middleText">10,779 feet</span></li>
  <li><strong>Permit Required</strong> <span class="middleText">Yes</span></li>
  <li><strong>Difficulty Rating</strong> <span class="middleText">4 (strenuous)</span></li>
</ul>

2. 调整CSS样式

替换原有的浮动方案为Flex布局，即可同时实现左右两端对齐、内容垂直居中的效果，修改后代码如下：

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 可按需调整上下间距，让列表排版更舒适 */
  padding: 6px 0;
}

你原来写的middleText的float规则可以直接删除，不需要保留。

如果需要让右侧数值的左边缘也统一对齐，可以给<strong>标签设置固定宽度，比如：

li strong {
  width: 140px;
}

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