Question

上午，

我有以下HTML：

<div id="sah_padding">
<div id="sah_holder">
   <div id="sah_name">Hello [agent_name]</div>
   <div id="sah_logout"><a href="#" id="logout_link" title="Logout">&#10006;</a></div>
</div>
You are working with [customer_name]
</div>

我有以下CSS：

#sah_padding{
    padding:10px 10px 10px 10px;
}

#sah_holder{
    padding-bottom:10px;
    clear:both;
}

#sah_name{
    float:left;
    width:50%;
}

#sah_logout{
    text-align:right;
}



#logout_link{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

但是我的登录链接和Hello消息没有正确对齐，注销链接在hello消息下面几个像素，我需要它们在同一水平线上。我做错了什么？

Answer 1

还将float提供给#sah_logout。写得像这样：

#sah_logout{
    float: left;
    text-align:right;
}

选中此http://jsfiddle.net/QUNT2/

Answer 2

检查元素的行高!!!

Answer 3

如果您将line-height :1设置为#logout_link元素，则应更正对齐方式（当然可以随意选择不同的值进行调整）

Answer 4

您还需要将浮点数设置为#sah_logout：

#sah_logout{
    float: left;
    text-align:right;
}

你甚至可以说，float: right。这完全是你的选择。仅执行text-align: right将修改容器内部内容的行为方式，而不是div在流程中的行为方式。

另外，你可能有一些问题，父div没有正确包裹子div（因为所有的孩子现在都有浮动属性），所以你可能需要添加另一个div，其中设置了clear: both式：

<div id="sah_holder">
    <div id="sah_name">Hello [agent_name]</div>
    <div id="sah_logout"><a href="#" id="logout_link" title="Logout">&#10006;</a></div>
    <div style="clear: both"></div>
</div>

Answer 5

为什么不简单地为“Hello”文本和注销链接使用内联元素，而不是浪费块级元素的时间？这就是内联元素应该做的事情 - 保持彼此一致。

<div id="sah_padding">
    <div id="sah_holder">
        <span id="sah_name">Hello [agent_name]</span><a href="#" id="logout_link" title="Logout">&#10006;</a>
    </div>
    <span>You are working with [customer_name]</span>
</div>

除非你想以不同的方式设置它们，否则你不太可能需要以前用于sah_holder内元素的任何CSS代码。

Answer 6

检查你更新的html： -

    <div id="sah_padding">

<div id="sah_holder">
   <div id="sah_name">Hello [agent_name]</div>
   <div id="sah_logout"><a href="#" class="logout_link" title="Logout">You are working with [customer_name]</a></div>
</div>

</div>

你更新的css： -

  #sah_padding{
    padding:10px 10px 10px 10px;
}

#sah_holder{
    padding-bottom:10px;
    border:1px solid red;
    overflow:hidden;
}

#sah_name{
    float:left;
    width:50%;
}

#sah_logout{
    float:right;
}

.logout_link{
    color:black;
    text-decoration:none;
    font-weight:bold;
}

或者您可以看到演示： - http://jsfiddle.net/WnecH/11/

为什么我的div不对齐？

6 个答案: