CSS按钮浮动问题

我有UL标签（LI）和标签数量可能会根据用户角色而有所不同。我想在我的UL结尾放置一个按钮，并希望它始终保持正确的对齐。CSS按钮浮动问题

enter image description here

但是这是不对的总和对齐，虽然它右对齐属性。 enter image description here

也许有人可以提供任何解决方案？

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

来源

2014-10-03 Alex44

照片都不错，但你需要发布您的代码。 – j08691 2014-10-03 14:36:29

无代码=无帮助：/ – starvator 2014-10-03 14:38:10

添加float：right;到最后李:) – 2014-10-03 14:40:50

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

来源

2014-10-03 14:46:32

把'overflow：auto'加入'＃menu'来限制浮动块在父块边缘内，否则这是一个好办法。 – 2014-10-03 14:48:20

这里是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; 
}

来源

2014-10-03 15:03:21

CSS按钮浮动问题

回答

相关问题