Question

我正在尝试创建一个导航栏，其中两个区域之间用空白分隔。我试过使用 float:right 和 justify-content: space-between，但我不确定为什么它没有做任何事情。我希望 site-header-right 在右侧，site-header-navbar 在左侧。

我确实考虑过在两个 div 之间设置边距，但这似乎是一个丑陋的修复，以后可能会也可能不会导致响应问题。（如果我错了，请告诉我哈哈）。

.site-header-navbar {
  display: inline-block;
  margin: auto;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
  margin: auto;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
}

<html>

<body>
  <div class="site-header-masthead">
    <div class="container">
      <div class="row">
        <div class="col-12 navbar">
          <div class="menu-hamburger"></div>
          <div class="toast-logo">
            <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
          </div>
          <div class="site-navigation">
            <nav class="site-header-navbar">
              <ul class="site-nav">
                <li><a href="https://us.toa.st/collections/women">Women</a></li>
                <li><a href="https://us.toa.st/collections/men">Men</a></li>
                <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
                <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
                <li><a href="https://us.toa.st/pages/events">Events</a></li>
                <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
                <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
              </ul>
            </nav>
            <div class="site-header-right">
              <div class="small-container">
                <button class="search-btn">Search</button>
                <a href="#" class="site-header-wishlist">
                  <span>Saved</span>
                  <span>(0)</span>
                </a>
                <a href="#" class="site-header-account">Account</a>
                <a href="#" class="site-header-cart">
                  <span>Bag</span>
                  <span>(0)</span>
                </a>
              </div>
            </div>
</body>

</html>

Answer 1

将 justify-content: space-between; 添加到您的 flex 容器 (.site-navigation) 以将两个子元素移动到最左侧和最右侧。并擦除 margin: auto; 两个弹性项目！所有其他偏移量都是由边距（也是默认的顶部和底部边距）引起的，因此您可能需要将它们重置为 0。

.site-header-navbar {
  display: inline-block;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
  justify-content: space-between;
}

<div class="site-header-masthead">
  <div class="container">
    <div class="row">
      <div class="col-12 navbar">
        <div class="menu-hamburger"></div>
        <div class="toast-logo">
          <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
        </div>
        <div class="site-navigation">
          <nav class="site-header-navbar">
            <ul class="site-nav">
              <li><a href="https://us.toa.st/collections/women">Women</a></li>
              <li><a href="https://us.toa.st/collections/men">Men</a></li>
              <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
              <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
              <li><a href="https://us.toa.st/pages/events">Events</a></li>
              <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
              <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
            </ul>
          </nav>
          <div class="site-header-right">
            <div class="small-container">
              <button class="search-btn">Search</button>
              <a href="#" class="site-header-wishlist">
                <span>Saved</span>
                <span>(0)</span>
              </a>
              <a href="#" class="site-header-account">Account</a>
              <a href="#" class="site-header-cart">
                <span>Bag</span>
                <span>(0)</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以在导航栏之间使用

&nbsp

在两个 div 之间添加空格

2 个答案: