html - 为什么我需要添加一个类两次才能使 justify 工作？

Question

我想知道为什么我的菜单项只有在将类菜单添加到直接父级然后再次添加到父级的父级时才能正确显示。

当我删除其中一个 to 菜单类时，span 项将无法对齐。

http://codepen.io/anon/pen/vLVwJV

<nav>
<div class="top-nav"></div>
<div class="bottom-nav">
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1>Portfolio van Dirk</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 menu">
            <div class="menu">
                <span>Concepten</span>
                <span>Ontwerp</span>
                <span>Artikelen </span>
                <span>Programmeren</span>
                <span>curriculum vitea</span>
                <span>Contact</span>
            </div>
        </div>
    </div>
</div>
</div>

.menu
text-align: justify
text-transform: lowercase
position: relative
padding-top: 20px

span
    padding-bottom: 20px
    font-weight: 200
    font-size: 18px
    color: white 

.menu:after
    content: ' '
    display: inline-block
    width: 100%
    height: 0 

.menu > span 
    display: inline-block

Answer 1

查看编译后的 css，删除一些空格，然后就可以了。

.menu .menu:after {
  content: " ";
  display: inline-block;
  width: 100%;
  height: 0;
}
.menu .menu > span {
  display: inline-block;
}

http://codepen.io/anon/pen/jWeodM