居中：在边界到容器末端之后？ [复制]

Posted 2023-03-07

【中文标题】居中：在边界到容器末端之后？ [复制]

【英文标题】：centering :after border to end of container? [duplicate]

【发布时间】：2021-12-17 10:02:00

【问题描述】：

如何使:after 边框到达容器的末尾使用纯 css 或 Tailwind？ 理想情况下填充剩余空间，如下图 2 所示。目前，我的宽度是 5rem，flexbox 看起来很理想，但我无法让它工作。

.subheading:after 
  background-color: rgb(194, 188, 178);
  content: "";
  display: inline-block;
  height: 0.25rem;
  position: relative;
  vertical-align: middle;
  width: 5rem;
  align-items: center;


.subheading:after 
  margin-left: 20px;

<section class="flex">
    <h1 class="subheading">Coronovirus</h1>
</section>

图片1

Image2

【参考方案1】：

我在你的 css 中添加了一些 ligns：

将h1 设置为display:flex 并进行一些对齐调整 添加:after 添加flex: 1 1 auto;

.subheading:after 
  background-color: rgb(194, 188, 178);
  content: "";
  display: inline-block;
  height: 0.25rem;
  position: relative;
  vertical-align: middle;
  width: 5rem;
  align-items: center;


.subheading:after 
  margin-left: 20px;
  /* ADDED */
  flex: 1 1 auto;


/* ADDED */
h1
  display:flex;
  align-items:center;

<section class="flex">
    <h1 class="subheading">Coronovirus</h1>
</section>