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

对齐

将其显示更改为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>

Answer 2

你强迫你的列表是140px宽，所以它只能让它在整个单元格的中途。改变这一行

<ul name="s_truck" style="height: 200px;overflow-y: auto;width: 140px;">

到这个

<ul name="s_truck" style="height: 200px;overflow-y: auto;">

CSS右对齐表格中的列表

2 个答案: