Question

我有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：标签：

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

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

有人可以帮助我吗？

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

Answer 2

你需要浮动ul。现在ul是一个块元素，意味着它会显示在下一行之后，因此用户名低于它。如果你指定一个浮点数：左，它应该允许元素出现在列表右边的空白区域。

css定位在一列固定宽度布局中

2 个答案: