html - 标题在中间，按钮在右边的导航栏

Question

所以我试图创建一个导航栏，中间有一个标题，右边有一个按钮。如您所见，当我尝试这样做时，按钮出现在下一行并出现在 div 之外:

Fiddle

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
}

.buts {
  float: right;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>

display:inline-block 似乎删除了文本的居中，所以我不能使用它...

提前致谢!

Answer 1

使用flexbox

flex: 1 0 auto; 将使 title 灵活，它将获取 flex-container 中的所有可用空间.

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
  display: flex;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
  flex:1 0 auto;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>

---

编辑:在@burak 评论说它不在正中央之后。

正如您在下图中看到的，一些空间被 Whats Up 按钮占用，这就是为什么标题不在正中心但文本在其父级正中心的原因.

我们也可以使它恰好位于中心，但为此我们需要使用 position:absolute 将 Whats Up 按钮移到另一层上 p>

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
  display: flex;
  position:relative;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
  flex:1 0 auto;
  
  background:rgba(0,0,0,.5)
}

.button{
  position:absolute;
  right:0;
  top:0;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>