Wie man die Schaltfläche in der Menüleiste platziert und das Label sofort links neben der Schaltfläche

Question

Ich habe eine Menüleiste, die die Kopfzeile für meine Webanwendung Ich habe eine Bezeichnung genommen, um den Benutzernamen zu binden, der eingeloggt ist und eine Taste ausloggen das Problem ist meine Bezeichnung und die Taste sollte in der Menüleiste nur sein, obwohl sie im Menü sind, aber die Taste Abmelden kann deutlich gesehen werden, dass es von Menü getrennt wird, muss ich Knopf nach rechts setzen und die Label auf der linken Seite der Schaltfläche. Wie kann ich das tun.

/*---Reset----*/ 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,block 
{ 
    padding: 0; 
    margin: 0; 
} 
/*body*/ 
body { 
    background-color:rgb(237,237,237); 
    font-family:"Arial",Helvetica,sans-serif; 
    font-size: 12px; 
} 
/*Page*/ 
.wrapper { 
    width:1430px; 
    margin:auto; 
} 
/*Home Page*/ 
.content { 
    width:100%; 
    background-color:rgb(254,254,254); 
    border:1px solid rgb(224,224,224); 
    border-radius:5px 5px 5px 5px; 
    float:left; 
    margin-top:8px; 
    margin-bottom:8px; 
    min-height:600px; 
} 
/*Menu*/ 
.menu { 
    background-color: rgb(10,110,178); 
    width: 100%; 
    margin: 0px 0px 10px; 
    padding: 0px; 
    height: 40px; 
    color: rgb(243,243,243); 
    border-radius: 5px 0 0 5px; 
} 
.navigation_first_item { 
    border-left: 0px; 
    border-radius: 5px 0 0 5px; 
} 
.navitem_s { 
    float: left; 
    border-right: 1px solid rgb(10,85,125); 
    border-left: 1px solid rgb(67,153,200); 
    height: 40px; 
    background-color: rgb(14,79,114); 
} 
.menu ul { 
} 
.menu ul li { 
     float:left; 
     display:block; 
     list-style:none; 
     border-right:1px solid rgb(10,85,125); 
     border-left:1px solid rgb(67,153,200); 

} 
.menu ul li.navigation_first_item:hover { 
      border-radius:5px 0px 0px 5px; 
} 
.menu ul li a { 
    font-size:13px; 
    font-weight:bold; 
    line-height:40px; 
    padding:8px 20px; 
    color:rgb(255,255,255); 
    text-decoration:none; 
    } 
.menu ul li:hover { 
     background-color: rgb(14,79,114); 
     border-right: 1px solid rgb(14,89,130); 

} 
.clear { 
    clear: both; 
} 
/*Footer*/ 
.footer { 
    height: 50px; 
    background-color: rgb(10,110,178); 
    color: rgb(255,255,255); 
    border-radius: 5px 5px 5px 5px; 
} 
    .footer h2 { 
     padding: 15px; 
     text-align: center; 
    } 

Answer 1

CSS-Code

unter meinem CSS-Code ist Sie

* 
{ 
padding: 0; 
margin: 0; 
} 

statt

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,block 
{ 
padding: 0; 
margin: 0; 
} 

auch tun könnte, scheint es, wie Sie fragen, wie zu setzen die Platzierung Ihrer Optionsfelder. Erstelle eine ID oder Klasse (was du anscheinend getan hast) und benutze die CSS, um sie vor den Labels zu platzieren.

Ich bin ein bisschen verwirrt auf Ihre Frage und was Sie fragen, obwohl.

Update:

 <div style="float: left;text-align:right; width: 45%;"> <asp:Button ID="Logout" runat="server" OnClick="Logout_Click" Text="Logout" Height="41px" Width="60px" style="font-weight:bold;background-color:rgb(10,110,178);flo‌​at:right;color:white‌​"/><li id="Logout" runat="server"><a href="logout.aspx" id="Rpf" runat="server">Logout</li> </div>