0

私はcssレイアウトを持っています：maxdesign.comからの1列固定幅レイアウト

以下はナビゲーション 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:label を同じナビゲーション 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;
}

ただし、ラベルは常にメニュー項目の行の下、右側の下部に表示されます。

誰かが私を助けることができますか？

4

2 に答える 2

1

あなたはulを浮かせる必要があります。現在、ulはブロック要素です。つまり、次の行に表示された後はすべて、ユーザー名はその下にあります。float：leftを割り当てると、リストの右側の空のスペースに要素が表示されるようになります。

于 2012-10-18T19:49:35.450 に答える
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 に答える