如何用CSS实现表格内列表的右对齐？现有代码无法生效

我懂你现在的困扰——明明给表格单元格加了右对齐样式，但里面的列表就是没法乖乖靠右，对吧？咱们来拆解下问题根源，再给你靠谱的解决办法。

先看你写的代码：你给带.ri类的td设置了text-align:right，但里面的<ul>是块级元素，即使父元素有右对齐样式，它本身默认还是左对齐的；再加上你给ul指定了固定宽度140px，这就导致它会在td里靠左占据140px的空间，完全没用到td的右对齐设置。另外，列表项<li>的对齐是继承自ul的默认text-align:left，所以不管td怎么设，li里的内容还是靠左。

给你两个可行的解决方案：

方案一：让整个列表在单元格里靠右，同时列表内容也右对齐 #

修改你的CSS，给ul加上两个关键样式：

ul { 
  list-style: none; 
  text-align: right; /* 让li里的文字和复选框右对齐 */
  margin-left: auto; /* 让ul本身在td里靠右排列 */
}
td{ vertical-align: top; width:300px }
.ri{ background-color:#AAA; text-align:right; }

对应的HTML补全缺失标签后可以保持原结构：

<table>
  <tr>
    <td>Equipo</td>
    <td class="ri">
      <ul name="s_truck" style="height: 200px;overflow-y: auto;width: 140px;">
        <li>
          <label for="chk_2013035"><input type="checkbox" name="trk[]" id="chk_2013035"> 示例选项1</label>
        </li>
        <li>
          <label for="chk_2013036"><input type="checkbox" name="trk[]" id="chk_2013036"> 示例选项2</label>
        </li>
      </ul>
    </td>
  </tr>
</table>

这里margin-left:auto是利用块级元素的特性，当宽度固定时，设置左边margin自动会让元素靠右；text-align:right则是让列表项里的内容对齐到右侧。

方案二：仅让列表内容右对齐，列表本身保持左对齐 #

如果不需要整个列表在td里靠右，只是想让li里的文字和复选框右对齐，那只需要给ul加text-align:right就行：

ul { 
  list-style: none; 
  text-align: right; /* 仅调整列表内容的对齐方式 */
}
td{ vertical-align: top; width:300px }
.ri{ background-color:#AAA; text-align:right; }

这样ul还是在td里靠左，但每个li里的内容都会靠右排列。

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