css - 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;
}

add above to your div

Answer 2

まず、P はブロック要素であり、(a とは異なり) インラインではありません。詳細については、こちらを参照してください。
p 要素は可能なコンテンツ幅 (この場合は div のすべての幅) の 100% を占め、そのテキストは css u が設定された右側に表示されます。
Aの場合はそうではありません。a 自体ではなく、a の範囲内でテキストを揃えました。これを変更するには、a ではなく、div 自体に text-aling プロパティを設定する必要があります。

Answer 3

あなたはあなたの要素に直接浮かぶべきです

div#header a { float: right; }