Question

我希望我的子菜单跨越浏览器窗口的整个宽度，如下图所示：

我正在使用Bootstrap，我的主菜单也浮动到右边。

我已经创建了一个关于到目前为止我所做的演示。我如何实现这一结果？

Answer 1

首先，bootstrap让你真的不灵活。因此，如果您想使用它，我建议将子菜单移出菜单的元素，因为width:100%;依赖于父级。因此，应该比父母更宽的一切都不应该是这个父元素的孩子。此外，position:absolute取决于position:absolute或position:relative的下一个父级。所以有很多事情不容易。移动子菜单会使它变得容易多了。您可以在width:100%;使用position:absolute和left:0。

或者要使子菜单脱离页面流，您可以使用position:fixed。并width:100%。查看此解决方案的 Codepen 。我更喜欢第一个，即使它的工作更多。然而，固定定位有一些副作用，但可能对你来说并不重要。

Answer 2

绝对子位置将相对于最近位置相对父位置，因此删除相对于主菜单li的位置将解决此问题。同时从主体和html中删除填充和边距。

＆＃13;

body, html{
  margin: 0;
  padding: 0;
}

.main-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: right;
}
.main-menu li {
  float: left;
}
.main-menu li a {
   display: block;
   background: #c2c2c2;
   padding: 20px;
   color: #337ab7;
   text-decoration: none;
}

.main-menu-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    padding: 0;
    list-style-type: none;
    background-color: black;
    text-align: center;
}
.main-menu-dropdown li {
  float: none;
  display: inline-block;
  margin-left: -4px;
}
.main-menu-dropdown li a {
  background: black;
  display: inline-block;
}

＆＃13;

<div class="container">
    <div class="col-md-12">
        <ul class="main-menu">
            <li><a href="#">First item</a></li>
            <li>
                <a class="has-dropdown" href="#">Second Item</a>
                <ul class="main-menu-dropdown clearfix">
                    <li><a href="#">Sub item 1</a></li>
                    <li><a href="#">Sub item 2</a></li>
                    <li><a href="#">Sub item 3</a></li>
                </ul>
            </li>
            <li><a href="#">Third Item</a></li>
            <li><a href="#">Fourth Item</a></li>
        </ul>
        <div class="col-md-12">
        I need the sub menu to span the width of the browser
        </div>
    </div>
</div>

＆＃13;

Answer 3

首先，子菜单的宽度受到限制，因为它的父元素有position: relative。

删除后，子菜单将变为全宽，但项目仍然左对齐。

在下面的示例中，我使.main-menu-dropdown使用了display: flex，然后将项目置于其中心。

http://codepen.io/adrianlynch/pen/RRddjk

.main-menu-dropdown {
  position: absolute;
  left: -15px;
  right: -15px;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: black;
}

如何使子菜单跨越浏览器窗口的全宽？

3 个答案: