爲什麼我的divs不對齊？

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

如果設置line-height :1到#logout_link元素，它應該糾正 對齊（當然隨意選擇不同的值進行調整）

Answer 2

您需要將浮動設置爲#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 3

給float也給你#sah_logout也。像這樣寫：

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

入住這http://jsfiddle.net/QUNT2/

Answer 4

與其浪費時間和塊級元素你爲什麼不乾脆用內聯元素的「你好」的文字和註銷鏈接二者的？這就是內聯元素應該做的 - 保持一致。

<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 5

檢查你的元素的行高！

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/