Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    <style>
        table {border: 1px solid black; width: 500px}
        .title {height: 40px}
        .close {float: right}
        td {text-align: center; border: 1px solid black} 
    </style>
    </head>

    <body>
     <table>
        <tr>
            <td class="title">  Centered  <span class="close">XXXXX</span>  </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
    </body>
</html>

在此示例中，“XXXX”确实位于右侧，但这会使“居中”文本稍微向左偏移。这是因为“XXXX”仍占用文本“Centered”旁边的文档流中的空间。我怎么能这样“居中”的中心与桌子的其他部分完全相同？

继承人和示例渲染：

rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png

Answer 1

如果你绝对定位span.close，它不会占用空间，你的标题应该完全居中：

tr td {
  position: relative;
}

tr td span.close {
  position: absolute;
  top: 0;
  right: 0;
}

编辑哎呀 - 以前从未遇到过。通常，具有position：relative的父级将充当具有position：absolute的子级的坐标系，但不是＆lt; td＆gt;的情况。如果你将你的标题和span.close包装在＆lt; div＆gt;中使用以下代码，您应该开展业务：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">

<html>
<head>
    <style>
        table {border: 1px solid black; width: 500px}  

        .title div {
           position: relative; 
           height: 40px; 
         }            

        td {text-align: center; border: 1px solid black}             

        td span.close {
          position: absolute;
          top: 0;
          right: 0;
        }
    </style>
</head>

<body>
     <table>
        <tr>
            <td class="title">  
              <div>Centered  <span class="close">XXXXX</span></div>  
            </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
</body>

如何在CSS / HTML中模拟窗口标题栏

1 个答案: