我有一个水平跨越我的网页的标题栏,它由一个 div 标签和三个嵌套的 div 标签组成。
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
它工作得很好,除了 div 标签在 HTML 代码中乱序,我不喜欢。如果我通过将 div 标签放置在 HTML 中的 Left、Center 和 Right 来排序它们,那么 Right div 就会从网页中消失!我猜它与 float 和 text-align 属性发生冲突有关。
任何人都对这里发生的事情有任何想法,或者在 CSS 中有更简单的方法吗?