html - 在导航栏上很好地放置图像徽标和品牌名称 React

Question

我试图将我的标志很好地放在导航栏的左上角。但是，当我这样做时，品牌名称会被置于一个奇怪的位置。

如果有人能告诉我如何将徽标和品牌很好地放在导航栏上，我将不胜感激。

这是 HTML：

  <nav id="navbar">
    <div className="nav-wrapper">
      <Link
        to={this.props.auth ? "/dashboard" : "/"}
        className="left brand-logo"
      >
        <img src={Logo} alt="logo" className="photo" />
        <div id="logo">Logo</div>
      </Link>
      <ul className="right">{this.renderContent()}</ul>
    </div>
  </nav>

这是CSS：

#navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
#logo {
  display: inline-block;
  height: 100%;
  padding-left: 20px;
}
.photo {
  width: 64px;
  height: 64px;
}

我目前正在为导航栏使用物化 CSS。

标签： htmlcssreactjsmaterialize

Answer 1

只需添加此 css 行，您就可以开始了。

.brand-logo {
  display: inline-flex !important;
}

CodesandBox： 徽标问题