如何让<hr>标签长度与Flexbox容器内容宽度一致？

核心思路 #

通过内联弹性包裹容器，让标题、水平线和内容Flex容器共享同一宽度基准——该宽度会自动适配内容的响应式排列，同时保持整体居中对齐。

具体实现步骤 #

• 新增包裹容器，将标题、水平线和Flex内容容器全部纳入其中
• 设置包裹容器为inline-flex（宽度收缩至内容宽度）+ 垂直排列，同时居中对齐
• 调整水平线样式，使其宽度与包裹容器一致，清除默认边距

修改后的代码 #

CSS 代码

* {
  box-sizing: border-box;
  font-family: 'Encode Sans', sans-serif;
}

.main-header {
  font-weight: 700;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 20px; /* 补全缺失的单位 */
}

.secondary-header {
  text-align: center;
  font-size: 10px; /* 补全缺失的单位 */
  margin-top: 0px;
}

/* 新增的包裹容器 */
.breaking-news-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.breaking-news-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.first-line {
  width: 100%;
  margin: 0 0 20px 0; /* 调整间距，清除默认上下边距 */
  border: none;
  border-top: 1px solid #000; /* 明确水平线样式 */
}

.breaking-news-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 0; /* 移除原大间距，由包裹容器内间距控制 */
}

.breaking-news-box {
  width: 300px;
  height: 400px;
  border: 1px dotted black; /* 合并边框样式 */
}

.breaking-news-images {
  width: 100%;
  object-fit: contain;
  object-position: top;
}

.breaking-news-titles {
  padding: 10px 15px 0; /* 合并内边距 */
  margin: 15px 0 0;
}

.breaking-news-paragraph {
  font-size: 12px;
  padding: 0 15px;
}

HTML 代码

<h1 class="main-header">主标题</h1>
<p class="secondary-header">副标题</p>

<!-- 新增包裹容器 -->
<div class="breaking-news-wrapper">
  <div class="breaking-news-title">Breaking news</div>
  <hr class="first-line" />
  <div class="breaking-news-container">
    <div class="breaking-news-box">
      <img class="breaking-news-images" src="https://picsum.photos/id/1025/320/200">
      <h3 class="breaking-news-titles">Missing dog found alive after 6 days</h3>
      <p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
    </div>
    <div class="breaking-news-box">
      <img class="breaking-news-images" src="https://picsum.photos/id/1048/320/200">
      <h3 class="breaking-news-titles">Elon Musk investigated over Twitter deal</h3>
      <p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
    </div>
    <div class="breaking-news-box">
      <img class="breaking-news-images" src="https://picsum.photos/id/117/320/200">
      <h3 class="breaking-news-titles">Billie Eilish announces Happier That Ever world tour</h3>
      <p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
    </div>
    <div class="breaking-news-box">
      <img class="breaking-news-images" src="https://picsum.photos/id/160/320/200">
      <h3 class="breaking-news-titles">EU approves common charging cable from 2024</h3>
      <p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
    </div>
  </div>
</div>

效果说明 #

• 包裹容器为inline-flex，宽度自动匹配内部Flex容器的内容宽度（包括换行后的宽度）
• 水平线设置width: 100%，会继承包裹容器宽度，完美匹配下方内容宽度
• 保持响应式：浏览器窗口缩小时，Flex容器自动换行，包裹容器宽度同步缩小，水平线也随之收缩，不会出现内容被隐藏的问题

内容的提问来源于stack exchange，提问作者santa_cloudy