如何在CSSHTML中模拟窗口标题栏_html-js-css

概述<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <style> table {border: 1px solid b

<!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 >  Centered  <span >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;}

编辑W@R_502_5943@-以前从未遇到过.通常,位置为“相对”的父母将作为位置为“绝对”的孩子的坐标系,但在< 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 >                <div>Centered  <span >XXXXX</span></div>              </td>        </tr>        <tr>            <td>content</td>        </tr>        <tr>            <td>content</td>        </tr>        <tr>            <td>content</td>        </tr>    </table></body>

总结

以上是内存溢出为你收集整理的如何在CSS / HTML中模拟窗口标题栏全部内容，希望文章能够帮你解决如何在CSS / HTML中模拟窗口标题栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1106164.html