帶徽標的固定導航

Question

如何創建帶有左側徽標和右側導航的頂部導航欄。當我使用flexbox或display-inline-block時，它不起作用。

<header id="header" class="header"> 
    <a class="logo" href="" title="">Essembli.</a> 
    <nav class="top-nav"> 
     <ul class="site-nav"> 
      <li><a href="" title="">O nas</a></li> 
      <li><a href="" title="">Zespół</a></li> 
      <li><a href="" title="">Kompetencje</a></li> 
      <li><a href="" title="">Zarząd</a></li> 
      <li><a href="" title="">Kariera</a></li> 
      <li><a href="" title="">Kontakt</a></li> 
     </ul> 
    </nav> 
    </header><!-- /header --> 

我的CSS：

.header { 
    position: fixed; 
    .logo { 
     float: left; 
    } 
    .top-nav { 
     .site-nav { 
      display: inline-block; 
      li { 
       display: inline-block; 
       list-style-type: none; 
       margin-right: 15px; 
      } 
     } 
    } 
} 

Answer 1

你可以通過使用下面的方法得到它 我發佈它在CSS不scss。

如果你檢查小提琴，它會更清楚你如何得到它。

Fiddle

.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    background: tomato; 
 
    padding: 5px; 
 
} 
 

 
.logo { 
 
    flex: 1 0 0; 
 
} 
 

 
.navigation { 
 
    flex: 1 0 0; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 

 
.navigation ul { 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 

 
.content { 
 
    margin-top: 30px; 
 
}

<header id="header" class="header"> 
 
    <div class="logo"> 
 
    LOGO 
 
    </div> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="#">NAV</a></li> 
 
     <li><a href="#">NAV</a></li> 
 
     <li><a href="#">NAV</a></li> 
 
     <li><a href="#">NAV</a></li> 
 
    </ul> 
 
    </div> 
 
</header> 
 
<!-- /header --> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque! 
 
</div>

Answer 2

你需要應用display: inline-block;到.top-nav因爲導航是默認塊元素。

加紅/綠背景顏色爲您展示的塊大小，而是採用浮動，只是用一個div來包裝標誌

https://jsfiddle.net/dalinhuang/hfhjtp2y/

SCSS：

.header { 
    position: fixed; 
    background: green; 
    .logowrapper { 
    display: inline-block; 
    } 
    .top-nav { 
    .site-nav { 
     display: inline-block; 
     li { 
     display: inline-block; 
     list-style-type: none; 
     margin-right: 15px; 
     } 
    } 
    display: inline-block; 
    background: red; 
    } 
} 

.header { 
 
    position: fixed; 
 
    background: green; 
 
} 
 

 
.header .top-nav { 
 
    display: inline-block; 
 
    background: red; 
 
} 
 

 
.header .top-nav .site-nav { 
 
    display: inline-block; 
 
} 
 

 
.header .top-nav .site-nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin-right: 15px; 
 
} 
 

 
.logowrapper { 
 
    display: inline-block; 
 
}

<header id="header" class="header"> 
 
    <div class="logowrapper"><a class="logo" href="" title="">Essembli.</a></div> 
 
    <nav class="top-nav"> 
 
    <ul class="site-nav"> 
 
     <li><a href="" title="">O nas</a></li> 
 
     <li><a href="" title="">Zespół</a></li> 
 
     <li><a href="" title="">Kompetencje</a></li> 
 
     <li><a href="" title="">Zarząd</a></li> 
 
     <li><a href="" title="">Kariera</a></li> 
 
     <li><a href="" title="">Kontakt</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<!-- /header -->