1

我希望所有文本都正确对齐，尽管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%;
    }
4

3 回答 3

5 
#header {
    text-align:right;
}

将上面添加到您的 div

于 2012-05-21T12:48:57.833 回答
2

首先，P 是块元素，而不是内联元素（与 a 不同），您可以在此处找到更多信息。
您的 p 元素占据了可能的内容宽度的 100%（在这种情况下是 div 的所有宽度），并且它的文本在 css u 设置下向右突出。
A 的情况并非如此；您将文本与 a 对齐，而不是 a 本身。要更改这一点，您需要为 div 本身而不是为 a 设置 text-aling 属性

于 2012-05-21T12:58:24.530 回答
1

你应该浮动到你的元素

div#header a { float: right; }

于 2012-05-21T12:52:51.717 回答