Question

因此，我尝试创建一个中心标题的导航栏和右侧显示的按钮。正如您所看到的，当我尝试这样做时，按钮出现在下一行并且出现在div之外：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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>

导航栏，标题位于中心，按钮位于右侧

4 个答案: