CSS按钮浮动问题

Question

我有带标签（LI）的UL，根据用户角色，标签数量可能会有所不同。 我想在我的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;
}