Html 如何将元素均匀分布到容器的边缘

.header-section {
  border: 1px solid red;
  display: flex;
  width: fit-content;
  height: fit-content;
  flex-direction: column;
}

.title {
  font-size: 75pt;
  margin: 0;
}

.subtitles {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitles label {
  flex-grow: 1;
  text-align: center;
  width: fit-content;
}

<div class="header-section">
  <h1 class="title">Title goes here</h1>
  <div class="subtitles">
    <label><- this should be left</label>
    <label>This is fine</label>
    <label>this should be right -></label>
  </div>
</div>

.header-section {
  border: 1px solid red;
  display: flex;
  width: fit-content;
  height: fit-content;
  flex-direction: column;
}

.title {
  font-size: 75pt;
  margin: 0;
}

.subtitles {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitles label {
  flex-grow: 1;
  width: fit-content;
}

.subtitles label:nth-child(1) {
  text-align: left
}

.subtitles label:nth-child(2) {
  text-align: center
}

.subtitles label:nth-child(3) {
  text-align: right
}

<div class="header-section">
  <h1 class="title">Title goes here</h1>
  <div class="subtitles">
    <label>this should be left</label>
    <label>This is fine</label>
    <label>this should be right</label>
  </div>
</div>

Html相关问答推荐

将文本区域标签的内容着色为SON(带有 colored颜色 )

Flexbox嵌套div溢出

如何在htmlAngular 17的@for中使用索引

具有可展开行的棱角material 表(垫子表)，折叠时行之间仍有间隙

在网页上的 Select 器中显示选项时出现问题：未在GO模板中传递循环{{range}}的数据

如何更改计时器S输入的Angular 字体大小？

响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

IFRAME中的Chrome图像未调整大小

浏览器是否可以呈现存储在代码点0x09处的字形？

使用CSS和Slick Carcass使图像适合屏幕

按钮悬停效果不影响按钮内的图标

Div 容器不会遵守边距、填充或间隙

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

使用flex wrap时，如何设置另一个元素的宽度与换行后的元素对齐？

HTML 如何根据屏幕尺寸调整/裁剪视频背景？

Mediawiki css/html 信息框创建空白行

为四开本网站主页添加背景图片

如何突出显示 .qmd html 文件中的特定代码行

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条？

以 HTML 格式显示的 LaTeX 表格