表中TD高度问题

Question

我有一个具有以下结构的表 -

**HTML:**
    <table>
        <tr class="table_row row_over">
          <td><input type="checkbox" name="check_data_1" class="check_box" /></td>
          <td>
              Data1
          </td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>
              <span class="row_controls">
                  <a href="#" class="icon_22 icon_delete">
                     <span>Delete</span>
                  </a>
              </span>
          </td>
        </tr>
    </table>

**CSS:**
.icon_delete {
    background-position: 0 0px;
}
.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

问题： TD 的高度根据图标高度而增加。它增加了 TD 高度并与其他 td 错位，因为 TD 底部仍然留有空间。

预期作为附加图像：

Answer 1

如果您想将图标对齐到中间，我会这样做：

将图标的 css 更改为 display: block：

.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

然后，因为您使用的是 td，为该 td 指定一个类，以便它在中间垂直对齐：

<td class="alignMiddle">

和 CSS：

.alignMiddle {
   vertical-align: middle;
}

Answer 2

除非 .row_controls 为 position:relative; 并且图标为 position:absolute;，否则它将成为 正常流程，因此占用空间。

目前您正在使用inline-block。您需要使用定位或浮动技术将其从正常流程中拉出来。

尝试以下作为基础。

.row_controls {
  position: relative;
}

.icon_22 {
  position: absolute;
}