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

<!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”仍在文档流中占据文本“居中”旁边的空间.我如何才能使“居中”与表格的其余部分完全居中？

继承和示例渲染：

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

最佳答案

如果您绝对定位span.close,则不会占用空间,并且标题应该完美居中：

tr td {
  position: relative;
}

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

编辑Whoops-以前从未遇到过.通常,位置为“相对”的父母将作为位置为“绝对”的孩子的坐标系,但在< td>情况下则不然.如果您将标题和span.close包装在< div>中,使用以下代码,您应该从事业务：

<!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中模拟窗口标题栏

相关文章