CSS 对齐:左右问题

Question

我希望所有文本都正确对齐，尽管Support   | Profile   |     Logout左对齐，而Welcome右对齐。为什么会这样？

<div id="header">
        <a href="#">Support</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#">Profile</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#">Logout</a>
        <p>Welcome, Today is <script type="text/javascript">timeinit();</script></p>
    </div> 
   #header {
        background: #00557F;
        border-bottom: 2px gray;
        padding: 1em;
        width: 100%;
        height: 50px;
    }
    div#header p {
        color: #B7DDF2;
        font: 10px Arial;
        margin: 0;
        text-align: right;
        width: 100%;
    }
    div#header a { 
        text-decoration: none;
        color: #B7DDF2;
        font: 10px Arial;
        text-align: right;
        margin: 0;
        width: 100%;
    } 
    div#header a:hover { 
        font: 10px Arial;
        color: #FFCF8B; 
        text-decoration: underline;
        text-align: right;
        margin: 0;
        width: 100%;
    }

Answer 1

#header {
    text-align:right;
}

将以上添加到您的div

Answer 2

首先，P是一个块元素，而不是内联的(与a不同(，你可以在这里找到更多信息。
你的 p 元素占据了可能的内容宽度的 100%(在本例中是div 的所有宽度(，并且它的文本在设置了 css u 的情况下向右点燃。
与 A 的情况并非如此;您将文本对齐在 a 内，而不是 a 本身。要更改此设置，您需要为div 本身而不是 a 的

Answer 3

你应该在你的元素上浮点

div#header a { float: right; }