Question

我正在研究导航栏的风格。我希望边框扩展到菜单占用区域的100％宽度，但我希望行中的元素浮动到此100％宽度区域的右侧。不幸的是，如果我把所有东西都浮到右边那么它就不会扩展到全宽。

以下是要查看的图片：http://i.imgur.com/EKd3cZY.png 你可以看到它的宽度和实际的宽度。

这是我的HTML：

<section class="row">
    <nav class="top-bar-navigation">
        <div class="main-menu-holder">
            <ul class="main-menu">
                <li><a class="active" href="#">Active</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
                <li><a href="#">Page 4</a></li>
                <li><a href="#">Page 5</a></li>
            </ul>
            <button>CTA BUTTON</button>
        </div>
        <ul class="secondary-menu">
            <li><a href="#">Support</a></li>
            <li><a href="#">Docs</a></li>
            <li><a href="#">Why</a></li>
            <li><a href="#">Social</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
</section>

这是我为nav元素创建的SASS。默认元素还有其他一些样式，例如排版，但我认为它与此问题无关：

.top-bar-navigation {
width: 100%;
clear: both;

.main-menu-holder {
    border-bottom: 2px solid $pale-grey;
    overflow: hidden;
}

.main-menu-holder,
.secondary-menu {
    float: right;
}

span,
button,
.main-menu {
    display: inline-block;
}

li {
    display: inline-block;
}

a {
    color: black;
    font-weight: 300;
}

a.active {
    font-weight: 700;
}
}

这是Row风格：

.row {
  width: 90%;
  margin: auto;
  max-width: 1100px;
  margin-bottom: 5px;
}

.row:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Answer 1

您是否尝试过使用<hr />或创建一个带有类的新div来设置其样式以产生相同的效果？

如何扩展包含浮动元素的行扩展到100％宽度？

1 个答案: