0

我有 css 布局：一列固定宽度布局，来自maxdesign.com

以下是导航 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>

现在，我想通过执行以下操作在同一个导航 div 中放置一个当前用户登录的 asp:label：

 <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;
}

但是标签总是显示在菜单项的下方，在它们的右边但在它们的下方。

有人能帮我吗？

4

2 回答 2

1

为什么不把标签放在右边浮动的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-18T19:47:33.753 回答
1

你需要浮动 ul。现在 ul 是一个块元素，意味着它之后的任何内容都会显示在下一行，因此用户名在它的下方。如果您分配一个 float:left，它应该允许元素出现在列表右侧的空白区域。

于 2012-10-18T19:49:35.450 回答