Flex導航不對齊

好吧，我正在學習flexbox的過程中，但我不明白爲什麼我的導航標題在鏈接上方。Flex導航不對齊

HTML：

<style> 
    @import url(https://fonts.googleapis.com/css?family=Oswald:400,700); 
    .box { 
     display: flex; 
    } 

    .item { 
     width: 100px; 
     height: 100px; 
     background-color: red; 
     margin: auto; 
     color: #fff; 
    } 

    nav { 
     font-family: "Oswald", sans-serif; 
     display: flex; 
     min-width: 100%; 
     background-color: #181818; 
    } 
    nav ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     display: flex; 
     max-width: 960px 
    } 
    nav a { 
     display: block; 
     padding: 1rem; 
     text-decoration: none; 
     color: #fff; 
     font-weight: 400; 
     transition: all 0.3s ease-in-out; 
    } 
    nav a:hover { 
     color: #343434; 
    } 

    .title { 
     margin: 0 35px 0 10px; 
     color: #1BC; 
    } 

       </style>  

    <nav> 
     <div class="container"> 
     <a class="title">Architect</a> 
     <ul> 
     <li><a href="#">Getting Started</a></li> 
     <li><a href="#">Examples</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Forum</a></li> 
     </ul> 
     </div> 
    </nav>

集裝箱CSS：

.container{ 
    width: 100%; 
    margin: 0 auto: 
    max-width: 1200px; 
}

典筆鏈接：http://codepen.io/ZoidCraft/pen/XKMewy

我想的標題是「建築師」要對齊到鏈接的左側。

來源

2016-06-28 Zoid

這是因爲'Architect'不是你的'nav ul'的孩子，它有'display：block;'。 – zgood

將'.box'規則更改爲'.container' ... http://codepen.io/anon/pen/wWJmXm – LGSon

我是這麼做的，所以一旦我做了一個切換導航但看不到我能使其成爲導航的孩子。：D @zgood – Zoid

您在css中將<a class="title">Architect</a>設置爲display: block;。塊級元素將佔據他們自己的路線。 display: flex;元素也將採取自己的路線。

要解決您的問題，您可以先從nav a風格中刪除display: block;。然後將您的nav ul從display: flex;更改爲display: inline-flex;。現在，你只需要背padding: 1em 0;添加一些填充到您的nav，因爲一切都內嵌式地顯示了，所以添加到您的nav

這裏是我談論的更新CodePen。

來源

2016-06-28 21:03:09 zgood

爲什麼所有這些麻煩，當OP只需要修改CSS中的名稱引用問題，將'.box'更改爲'.container'？ – LGSon

@LGSon你是怎麼回事？如果他使用引導程序，那也可能是麻煩的。它會使所有'.row'的彈性項目。他甚至不在他的HTML示例中使用'.box'或'.container'。 – zgood

然後看看他的codepen，你會看到我在說什麼（這個是我只使用我提出的修復更新）：http://codepen.io/anon/pen/wWJmXm – LGSon

Flex導航不對齊

回答

相關問題