html - Why do I need to add a class two times to make justify work? -
i'm wondering why menu-items correctly show when class menu added direct parent , again parent of parent.
when remove 1 of menu classes span items won't justify.
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
in sass css defined .menu class within .menu class. css compiling to:
.menu .menu > span { display: inline-block; } .menu .menu:after { content: " "; display: inline-block; width: 100%; height: 0; }
that's not want. remove "menu" column div
looks this:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
and update sass css looks this:
.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
Comments
Post a Comment