CSS定位固定寬度的佈局

我有CSS佈局：一列固定寬度的佈局，從maxdesign.com CSS定位固定寬度的佈局

以下是導航DIV：

<div id="navigation"> 
     <ul> 
      <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li> 
      <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>     
     </ul>   
    </div>

現在，我要放置一個ASP：標籤與當前用戶登錄，在相同的導航DIV做這個：

<div id="navigation"> 
     <ul> 
      <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li> 
      <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>     
     </ul> 
     <div id="username"> 
      <asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label> 
     </div>   
    </div>

與CSS代碼：

#navigation 
{ 
    float: left; 
    width: 960px; 
    background: #1f2d3a;  
} 

#navigation ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li 
{ 
    list-style-type: none; 
    display: inline; 
} 

#navigation li a 
{ 
    display: block; 
    float: left; 
    padding: 1px 5px; 
    color:#fff; 
    font-size: 14px; 
    /*font-weight: bold;*/ 
    border-right: 1px solid#fff; 
} 

#navigation li a:hover { background:#0c749b; } 

    #username 
{ 
    float: right; 
    padding-right: 5px; 
    color:#fff; 
}

但是標籤始終顯示在菜單項的下方，在右側但在其下方。

有人可以幫助我嗎？

來源

2012-10-18 Somebody

爲什麼不把標籤放在正確的浮動li，內部#navigation？您的CSS可以保持不變，因爲#username已經正確地浮動。

<div id="navigation"> 
     <ul> 
      <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li> 
      <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>     
      <li id="username"><asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label></li> 
     </ul> 
</div>

來源

2012-10-18 19:47:33

謝謝！這就是我所做的，它的工作（9分鐘接受你的答案）:) – Somebody

高興地幫助！ :)'浮動'屬性是最難學的東西之一在CSS –

您需要浮動ul。現在ul是一個塊元素，意味着它會在下一行顯示，因此用戶名在它下面。如果您指定了float：left，它應該允許元素出現在列表右側的空白處。

來源

2012-10-18 19:49:35 Hat

感謝解釋（+1）:) – Somebody

CSS定位固定寬度的佈局

回答

相關問題