将一个表格单元格中的div对齐一次

Question

我正在尝试做一些应该相当简单的事情.我在表中有一列文本,其值为1到18.我希望具有文本的单元格对齐中心.但是,有时,同一个单元格需要显示星号(*).显示星号时,它应该在同一个单元格中左对齐,同时保持数字本身完全对齐.

我无法让它以正确的方式对齐

<table border=1>
  <tr>
    <td style="text-align:center" width=50>
      <div>
        <div style="float:left;">*</div>
        <div>14</div>
      </div>  
    </td>
  </tr>
  <tr>
    <td align=center>
      <div></div>
      <div>16</div>
    </td>
  </tr>
</table>

Answer 1

只要给position: absolute到div用星号,你的号码将被适当地始终围绕:

<table border=1>
  <tr>
    <td style="text-align:center" width=50>
      <div>
        <div style="position: absolute;">*</div>
        <div>14</div>
      </div>  
    </td>
  </tr>
  <tr>
    <td align=center>
      <div></div>
      <div>16</div>
    </td>
  </tr>
</table>

在这种情况下position: absolute告诉:"不要考虑绝对定位div的尺寸".如果你要检查div带数字,你会看到,它需要父元素的整个宽度和高度,就像div带有星号的那样不在DOM中.

可能是我的解释有点差,而不是100%正确,但它应该给你基本的理解.欲了解更多信息,请查看本网站或其他地方的"position:absolute"区域:https://www.w3schools.com/css/css_positioning.asp