CSS按鈕浮動問題

Question

我有UL標籤（LI）和標籤數量可能會根據用戶角色而有所不同。 我想在我的UL結尾放置一個按鈕，並希望它始終保持正確的對齊。

但是這是不對的總和對齊，雖然它右對齊屬性。

也許有人可以提供任何解決方案？

     <ul id="menu"> 
         <li id="homeOption">@Html.ActionLink("Home", "Index", "Home")</li> 
         @if (User.Identity.IsAuthenticated) 
         { 

          if (User.IsInRole("Role1")) 
          { 
           <li id="agencyImportOption">@Html.ActionLink("link1")</li> 
          } 

           if (User.IsInRole("Role2")) 
          { 
           <li id="agencyImportOption">@Html.ActionLink("link2")</li> 
          } 

          if (User.IsInRole("Role3")) 
          { 
           <li id="agencyImportOption">@Html.ActionLink("link3")</li> 
          } 

         <li id="aboutOption">@Html.ActionLink("About")</li> 
         <li> 
         <button class="testButton" style="float:right; margint-right: 0px;">test button<button></li> 
        </ul> 

Answer 1

給你http://jsfiddle.net/mmqxgony/

的HTML

<ul id="menu"> 
    <li id="homeOption">Home</li> 
    <li id="agencyImportOption">link1</li> 
    <li id="aboutOption">About</li> 
    <li class="last"> 
     <button class="testButton" style="float:right; margint-right: 0px;">test button</button> 
    </li> 
</ul> 

CSS的

#menu{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 
#menu li{ 
    float: left; 
    margin: 10px; 
} 
#menu li.last{ 
    float: right; 
} 

Answer 2

這裏是HTML。

<ul id="menu"> 
    <li id="homeOption">Home</li> 
    <li id="agencyImportOption">link1</li> 
    <li id="aboutOption">About</li> 
    <li> 
    <button class="testButton" style="float:right; margint-right: 0px;">test button</button> 
</li> 

CSS

#menu { 
    list-style: outside none none; 
    margin: 0; 
    padding: 0; 
    width: 100%;/* if you need*/ 
} 
#menu > li { 
    display: inline-flex; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: middle; 
} 
#menu > li:last-child{ 
    float: right; 
}