html - CSS 对齐以右对齐表格中的列表

Question

我在表格中有一个列表，我想将此列表右对齐，这听起来很容易，但由于某些原因不起作用。

这是我的代码:

ul {
  list-style: none;
}
td{
  vertical-align: top;
  width:300px
}
.ri{
  background-color:#AAA;
  text-align:right;
}

<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"> CA046</label>
        	</li>
        	<li>
          		<label for="chk_2013051"><input type="checkbox" name="trk[]" id="chk_2013051"> CA047</label>
        	</li>
        	<li>
          		<label for="chk_2013072"><input type="checkbox" name="trk[]" id="chk_2013072"> CA055</label>
        	</li>
        	<li>
          		<label for="chk_2013031"><input type="checkbox" name="trk[]" id="chk_2013031"> CA056</label>
        	</li>					
		</ul>
	</td>
  </tr>
</table>

在 jsfiddle 上:https://jsfiddle.net/aftc6vq8/7/

为什么不工作？

如何解决？

Answer 1

text-align 不会像 ul

那样对齐 block 级元素

将其显示更改为 inline-block

ul {
  list-style: none;
  display: inline-block;
}

td {
  vertical-align: top;
  width: 300px
}

.ri {
  background-color: #AAA;
  text-align: right;
}

<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"> CA046</label>
        </li>
        <li>
          <label for="chk_2013051"><input type="checkbox" name="trk[]" id="chk_2013051"> CA047</label>
        </li>
        <li>
          <label for="chk_2013072"><input type="checkbox" name="trk[]" id="chk_2013072"> CA055</label>
        </li>
        <li>
          <label for="chk_2013031"><input type="checkbox" name="trk[]" id="chk_2013031"> CA056</label>
        </li>
      </ul>
    </td>
  </tr>
</table>