如何在CSS/HTML中模拟窗口标题栏表{边框：1px纯黑色；宽度：500px} .title{高度：40px} .close{float:right} td{文本对齐：居中；边框：1px纯黑色} 中心XXXXX 内容内容内容_Html_Css

如何在CSS/HTML中模拟窗口标题栏表{边框：1px纯黑色；宽度：500px} .title{高度：40px} .close{float:right} td{文本对齐：居中；边框：1px纯黑色} 中心XXXXX 内容内容内容

html css

如何在CSS/HTML中模拟窗口标题栏表{边框：1px纯黑色；宽度：500px} .title{高度：40px} .close{float:right} td{文本对齐：居中；边框：1px纯黑色} 中心XXXXX 内容内容内容,html,css,Html,Css,在本例中，“XXXX”确实位于右侧，但这会导致“居中”文本稍微向左偏移。这是因为“XXXX”仍在文档流中占据文本“居中”旁边的空间。我怎么能让它像桌子的其他部分一样居中呢以下是渲染示例：如果您绝对定位span.close，它不会占用空间，您的标题应该完全居中： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> &l

在本例中，“XXXX”确实位于右侧，但这会导致“居中”文本稍微向左偏移。这是因为“XXXX”仍在文档流中占据文本“居中”旁边的空间。我怎么能让它像桌子的其他部分一样居中呢

以下是渲染示例：

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

<!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>

编辑哎呀-以前从未遇到过。通常情况下，具有position:relative的父对象将充当具有position:absolute的子对象的坐标系，但不适用于具有position:relative的子对象。如果您使用以下代码将标题和span.close包装在a中，则您应该处于业务状态：

tr td {
  position: relative;
}

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


表{边框：1px纯黑色；宽度：500px}
.业权科{
位置：相对位置；
高度：40px；
}            
td{文本对齐：居中；边框：1px纯黑色}
td span.close{
位置：绝对位置；
排名：0；
右：0；
}
中心XXXXX
内容
内容
内容

除非TD处于绝对位置，否则这将不起作用。否则，“top:0 right:0”将存储到整个文档中：这是一个固定宽度的表，具有固定宽度的“XXXX”值吗？@PortageMonkey在我的情况下，是的。但最好的解决方案是一个可变的方案。

<!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>