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