<!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;
}
编辑 糟糕 - 以前从未遇到过。通常，具有 position: relative 的父级将充当具有 position: absolute 的子级的坐标系，但在
中，您应该开始工作了:
<!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>
关于html - 如何在 CSS/HTML 中模拟窗口标题栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1266814/