我正在尝试使用float:right
将最后一个子项浮动到右侧,但是没有发生。有人可以帮忙吗?
CSS似乎已按预期加载,但是由于在引导程序4中使用了flex,因此这会造成问题,而无法获得预期的结果。
JSFiddle演示:https://jsfiddle.net/jbthz8L3/
<div id="main-nav" class="justify-content-end">
<ul id="menu-main-menu" class="navbar-nav">
<li class="menu-item current-menu-item current_page_item menu-item-home active nav-item"><a href="#" class="nav-link">Main Menu 1</a>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link">Main Menu 2</a>
<ul class="dropdown-menu" role="menu">
<li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 1</a>
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 1</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 2</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 3</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 4</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 5</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 6</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 2</a>
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 11</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 12</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 13</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 14</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 15</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 16</a></li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 17</a></li>
</ul>
</li>
<li class="menu-item nav-item"><a href="#" class="dropdown-item">Menu 3</a>
</li>
</ul>
</li>
<li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 3</a></li>
<li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 4</a></li>
</ul>
</div>
CSS:
.navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav > li:last-child {
float: right;
}
.navbar-nav > li {
margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
border: 1px solid #999;
background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: unset;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
background-color: #ffffff;
border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
display: block;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
border-left-color: #fff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
float: none;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
答案 0 :(得分:2)
将float:right;
更改为margin-left:auto;
。
答案 1 :(得分:2)
将float: right;
更改为
right: 0;
position: absolute;
答案 2 :(得分:2)
将float:right更改为margin-left:auto;
答案 3 :(得分:1)
其中一个选项:
right: 0;
position: absolute;
也许有一些预定义的引导程序特定的类可以用不同的方式解决它。