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

Question

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

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

中所有可用的免费 space

.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 评论说它不在正中央之后。

正如您在下图中看到的，一些 space 是由 Whats Up 按钮获取的，这就是为什么标题不在确切的中心但文本位于 parent.

的正中心

我们也可以把它放在精确的中心，但为此我们需要将 Whats Up 按钮移到另一层，方法是使用 position:absolute

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

Answer 2

我为标题栏使用了 flexbox，并自动计算左边所需的边距。

.title-bar {
  display: flex;
  justify-content: center;
  width: 100%;
}

.title, .button {
  margin-left: auto;
}

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

Answer 3

使用display:inline；这样标题和按钮都会出现在同一行。

Answer 4

.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;
  
}

.buttonRight{
  position:absolute;
  right:0;
  top:0;
  padding:5px;
}

<div class="title-bar">
  <div class="title">Title</div>
  <div class="buttonRight">
    <button class="btn btn-primary">Whats Up</button>
  </div>
</div>

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

Navbar with Title in center and buttons to right

html

css

navbar

display