如何使用scss對齊導航欄而不會搞亂subnav對齊？

Question

我發現了一個在線菜單的示例，它符合我的需求，並在Sass（或scss）中進行了樣式設計，但遇到了一些麻煩。

（注：我設法回答這個我自己，而與此擺弄，用於發佈，但是我真的不明白爲什麼它的工作如果我能得到一個答案解釋說，也許吧。）

我有一個具有UL子元素的導航元素，並且一些LI具有UL（即，一些鏈接具有SUBNAV菜單）。我試圖將導航欄居中，但無論我添加的樣式是什麼，最終都會改變subnav菜單，這將在上面的導航鏈接的右側顯示大約100像素。

<li> 
     <a href="#">The Journey</a> 
     <ul> 
      <li><a href="finding.html">Finding your way home</a></li> 
      <li><a href="confusion.html">Confusion is normal</a></li> 
      <li><a href="mistakes.html">Mistakes are okay</a></li> 
      <li><a href="fiddling.html">Fiddling is fine</a></li> 
      <li><a href="navigating.html">Become a navigator</a></li> 
     </ul> 
    </li> 
    <li><a href="#">The Power</a> 
    <ul> 
      <li><a href="#">Sublink 1</a></li> 
      <li><a href="#">Sublink 2</a></li> 
      <li><a href="#">Sublink 3</a></li> 
      <li><a href="#">Sublink 4</a></li> 
     </ul></li> 
    <li><a href="#">About</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    </ul> 
    <div style="clear:both;"></div> 
</nav> 

造型，在SCSS：

nav { 
    /* tried two versions of the following. */ 
    /* version 1, in which the navbar is centered, but the subnav */ 
    /* menus are shifted about 100px to the right,: the following */ 
    /* line is present. */ 
    /* it is absent in version 2, in which the */ 
    /* navbar is not centered but the subnav menus are lined up */ 
    text-align: center; 
} 

nav ul { 
    /* in version 1 only, the following line is present */ 
    display: inline-block; 

    list-style:none; 

    li { 
    float:left; 
    position:relative; 
    z-index:1; 
    a { 
    display:block; 
    padding: $link-vertical-padding $link-horizontal-padding; 
    text-align:center; 
    color:$link-color; 
    text-decoration:none; 
    transition: all 0.1s ease; 

    &:hover { 
     background: $color-bg-nav-hover; 
     color:$link-hover; 
     transition: all 0.2s ease; 
    } 

    ul { 
     background: $color-bg-subnav; 
     list-style:none; 
     padding:0; 
     position:absolute; 
     width:200px; 
     max-height:0; 
     z-index:0; 
     opacity:0; 
     overflow:hidden; 
     font-size:.9em; 
     box-shadow:0px 2px 2px rgba(0,0,0,.5); 
     transition: all 0.3s ease; 


     li { 
     float:none; 
     margin:0; 


     a { 
       color: #FFFFFF; 
      display:block; 
      text-align:left; 
      padding:$link-vertical-padding/1.5 $link-horizontal-padding/1.5; 
      margin:0; 
      border-right:none; 
      border-top:1px solid darken($menu-background,12%);; 
      box-shadow:inset 0px 1px 3px rgba(255,255,255,.03); 
      text-transform:none; 
      text-shadow:none; 
      transition: all 0.2s ease; 

      &:hover { 
      color:$link-hover; 
      background:lighten($menu-background,5%); 
      transition: all 0.5s ease; 
      } 

     } 
     } 
    } 
} 

這是我想通了，而構建這樣一個問題：

它的工作，當目標是中心導航欄，以將此行添加到導航欄和「導航欄」樣式中：

nav { 
    text-align: center; 
} 

nav ul { 
    display: inline-block; 
.... 
} 

但是，這也適用於'li'，'a'和subnav'ul'元素的「內嵌塊」顯示模式，這會影響subnav對齊。該解決方案是確保「inline-block的」僅適用於「UL」，這是「導航」的直系後裔：

nav > ul { 
    display: inline-block; 
} 

nav ul { 
    .. the remainder of styling posted in question ..; 
} 

在這一點上，我的問題是「哪個元素不應該有'內聯塊'造型，還有另一種避免這種情況的方法嗎？「

Answer 1

嘗試使用navflexbox，它比其他解決方案更加容易：

nav { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}