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不同），你可以找到更多信息here。
你的p元素占用了可能内容宽度的100％（在这种情况下是div的所有宽度），并且它的文本在css你设置的右边下降。
与A不是这样的;你将文本对齐在a中，而不是a本身。要更改此设置，您需要为div本身设置text-aling属性，而不是为a的

设置

Answer 3

你应该对你的元素一个浮动

div#header a { float: right; }

CSS对齐：左右问题

3 个答案: