Question

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

当我删除其中一个to菜单类时，span项目无法证明。

<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

Answer 2

这不是因为您的menu类justify规则。导致菜单崩溃的其他规则。

我已从justify班级样式中删除了.menu，并添加了一个只有just的新justify课程！当它只适用于内部div，http://codepen.io/anon/pen/dGgEjg

时，它才有效

Answer 3

在你的Sass CSS中，你在.menu类中定义了一个.menu类。所以你的css正在编译：

.menu .menu > span {
    display: inline-block;
}

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

这不是你想要的。因此，请从列div中删除“菜单”，使其如下所示：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

并更新你的sass css，看起来像这样：

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

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

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

    > span 
        display: inline-block

http://codepen.io/partypete25/pen/BjqegN

为什么我需要两次添加一个类来进行合理的工作？

3 个答案: