标题，hr和btn在同一行[重复]答案

【问题标题】：Header, hr and btn at the same line [duplicate]标题，hr和btn在同一行[重复]
【发布时间】：2021-05-28 06:09:16
【问题描述】：

我正在尝试在同一行显示带有 hr 和按钮的标题。像这样的：

标题------------------------------------ 按钮

我试过 display flex，但是 hr 变成了一条垂直线。

.flex-header {
  display: flex;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<hr/>
<button> Collections </button>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用<div> 和一些css 来创建类似<hr> 的行；

.flex-header {
  display: flex;
}

.line {
  display: flex;
  flex-grow: 1;
  height: 1px;
  align-self: center;
  margin: 0 20px;
  background-color: grey;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<div class="line"></div>
<button> Collections </button>
</div>

【讨论】：

解决方法很好，但是为什么现在按钮太大了？我怎样才能让它有一个正常的高度？
按钮与原始问题的大小相同。但是，button { height: 25px; } 之类的东西应该缩小按钮吗？
太棒了！ codepen.io/analuspi/pen/vYydeKE

【解决方案2】：

你需要改变h2元素的显示属性，默认是“block”，改为“in-line”（所以按钮显示在标题的一侧）

h2{
  diplay: inline;
}

到水平线，去掉显示flex并改变hr属性：

h2{
  hr{ 
  display: inline-block;
  width: 50%;
}
}

看项目： https://codepen.io/Luis4raujo/pen/mdOXdyB

如果这有助于您检查是否正确或投票！

【讨论】：

为什么是codepen？ inline code snippet 应该够了吧？
哦，还有，codepen显示垂直线，和OP一样的问题。
codepen的链接就是一个变化的例子。
你也画水平线吗？
移除 display: flex 并更改此 hr 属性。立即查看 codepen。

【解决方案3】：

让它表现得像一个表格是一种方法（但需要一些包装 div）：

<div class="w">
  <span class="a">Des habitations pour tous</span>
  <div class="b"><hr></div>
  <button class="c">COLLECTIONS</button>
</div>

.w {
  display: table;
}
.a, .b, .c {
  display: table-cell;
  white-space: nowrap;
}
.b {
  width: 100%;
}

【讨论】：