问题 - 如何在另一个div

Question

任何人都可以告诉我光学（自动 - 没有边距，填充修复）如何在标题h1 {Onás}的中间颈部和颈部放置导航？

我有什么

我想要什么

HTML

<div class="navigation">
  <a href="#">O nás</a>
  <a href="#">Otváracie hodiny</a>
  <div class="experiment"></div>
  <a href="#">Cenník</a>
  <a href="#">Kontakt</a>
</div>

<div class="container">
  <h1>O nás</h1>
</div>

小提琴（使用SCSS）：https://jsfiddle.net/bsxpp25k/

Answer 1

为此使用2级flex，一个用于导航，另一个用于左侧和右侧

＆＃13;

＆＃13;

html {
  font-family: sans-serif;
  font-size: 16px;
}

a { text-decoration: none; }

.navigation {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

  a {
    color: #fff;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    text-transform: uppercase;
    background-color: grey;
  }

  .experiment {
    border: 2px solid #fff;
    height: 100px;
    margin: 1rem;
    width: 100px;
  }


.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;

}
.navleft, .navright {
  flex-basis: 0px;
  flex-grow: 1;
  display: flex;
}

.navleft {
   justify-content: flex-end;
}
.navright {
   justify-content: flex-start;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: center;
}

＆＃13;

<div class="navigation">
  <div class="navleft">
  <a href="#">O nás</a>
  <a href="#">Otváracie hodiny</a>
   </div>
  <div class="experiment"></div>
  <div class="navright">
  <a href="#">Cenník</a>
  <a href="#">Kontakt</a>
  </div>
</div>
<div class="container">
  <h1>O nás</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

我使用0px的flex基础来使两个元素从相同的值开始增长，以便它们总是具有相同的宽度。

请注意，当必须缩小时，将flexbasis设置为给定值（两个元素相同）是不可靠的。请参阅以下代码段，并检查尺寸，它们是不同的

＆＃13;

＆＃13;

html {
  font-family: sans-serif;
  font-size: 16px;
}

a { text-decoration: none; }

.navigation {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 1rem;
  width: 514px;
}

  a {
    color: #fff;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    text-transform: uppercase;
    background-color: grey;
  }

  .experiment {
    border: 2px solid #fff;
    height: 100px;
    margin: 1rem;
    width: 100px;
  }


.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;

}
.navleft, .navright {
  flex-basis: 200px;
  flex-grow: 1;
  display: flex;
}

.navleft {
   justify-content: flex-end;
}
.navright {
   justify-content: flex-start;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: center;
}

＆＃13;

<div class="navigation">
  <div class="navleft">
  <a href="#">O nás</a>
  <a href="#">Otváracie hodiny</a>
   </div>
  <div class="experiment"></div>
  <div class="navright">
  <a href="#">Cenník</a>
  <a href="#">Kontakt</a>
  </div>
</div>
<div class="container">
  <h1>O nás</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决此问题的一种简单方法是为导航中的链接定义宽度。

将其添加到样式表并根据需要进行调整。我只是设置为150px用于演示目的。

.navigation a {
   width: 150px;
   text-align: center;
}