用导航列表项目填充容器

Question

这里是前端初学者。我正在尝试构建此页面，但在将导航栏项目与其余组件对齐时遇到问题。

这就是它目前在我的页面上的样子。

这就是我想要的。

我已确保我的容器尺寸均相同且具有特定宽度>

我的代码

<section class="navigation-bar">
                <div class="row">
                    <div class="col-single-column">
                        <nav class="topnav navbar" id="myTopnav">
                            <ul class="navbar-items">
                                <li class="inline-block"><a href="#Fashion">Fashion</a></li>
                                <li class="inline-block"><a href="#Electronics">Electronics</a></li>
                                <li class="inline-block"><a href="#art">Collectibles & Art</a></li>
                                <li class="inline-block"><a href="#home">Home & Garden </a></li>
                                <li class="inline-block"><a href="#sports">Sporting</a></li>
                                <li class="inline-block"><a href="#motors">Motors</a></li>
                                <li class="inline-block"><a href="#deals">Daily Deals</a></li>
                            </ul>
                        </nav>
                    </div>
                 </div>
            </section>

CSS

.navigation-bar {
        position: relative;
        top: -3em;
    }


    .navbar,
    .navbar-items,
    .navbar-items > li {
        float: none;
    }

    .navbar-items {
        padding: 0;
        display: table;
        width: 100%;
    }

    .navbar-items > li {
        display: table-cell;
    }

我尝试使用弹性、填充、边距和许多其他方法来调整元素之间的空间，但似乎没有任何效果。

Answer 1

您应该仅将

display: table;

用于表格。

您可以使用 Flexbox 实现所需的布局：

.navbar-items {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

这里是jsfiddle https://jsfiddle.net/vodkg1jp/1/