Question

如何在左侧创建带有徽标的顶部导航栏，在右侧创建导航栏。当我使用flexbox或display-inline-block时，它不起作用。

function ago( $datetime )
{
    $interval = date_create('now')->diff( $datetime );
    $suffix = ( $interval->invert ? '' : '' );
    if ( $v = $interval->y >= 1 ) return pluralize( $interval->y, 'year' ) . $suffix;
    if ( $v = $interval->m >= 1 ) return pluralize( $interval->m, 'month' ) . $suffix;
    if ( $v = $interval->d >= 1 ) return pluralize( $interval->d, 'day' ) . $suffix;
    if ( $v = $interval->h >= 1 ) return pluralize( $interval->h, 'hr' ) . $suffix;
    if ( $v = $interval->i >= 1 ) return pluralize( $interval->i, 'min' ) . $suffix;
    return pluralize( $interval->s, 'second' ) . $suffix;
}

我的CSS：

<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 -->

Answer 1

您需要将display: inline-block;应用于.top-nav，因为默认情况下nav是一个块元素。

添加红色/绿色背景颜色以显示块大小，而不是使用float，只需使用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 -->

Answer 2

您可以使用以下方法获得它我把它发布在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>

带徽标的固定导航

2 个答案: