仅用HTML和CSS实现父div内多个子div同排显示的问题求解

问题根因 #

• 仅给子元素设置flex属性或fit-content宽度，未规范父容器的布局规则，会导致要么子元素换行，要么父容器背景、边框范围收缩
• 单独给子元素设置inline-block不生效，通常是默认块级元素宽度100%、或父容器未清除默认排版规则导致

完整实现代码 #

HTML结构 #

<div class="nav"> <!-- 父容器：绿色导航区域 -->
  <div class="navbar">导航按钮1</div> <!-- 子元素：单个按钮 -->
  <div class="navbar">导航按钮2</div>
  <div class="navbar">导航按钮3</div>
  <div class="navbar">导航按钮4</div>
</div>

CSS样式 #

/* 父容器配置 */
.nav {
  display: flex; /* 核心：开启flex横向布局，子元素默认同行不换行 */
  width: 100%; /* 可按需修改为固定宽度，如900px，控制绿色导航区域总宽度 */
  background: #2e7d32; /* 绿色导航背景，可替换为你的色值 */
  padding: 12px 24px; /* 控制导航区域上下左右内边距，决定绿色区域的范围 */
  gap: 20px; /* 控制多个按钮之间的间距 */
  justify-content: flex-start; /* 按钮左对齐，可替换为center居中、space-between两端对齐等 */
}

/* 子元素按钮配置 */
.navbar {
  border: 1px solid #ffffff; /* 你用于标注尺寸的白色边框 */
  padding: 8px 18px; /* 控制按钮内部留白，决定单个按钮的大小 */
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  /* 若需要所有按钮宽度均分，可加 flex:1; 若需要固定按钮宽度，可加 width: 120px; */
}

方案优势 #

1. 子元素默认同行排列，不会出现换行问题，需要换行时仅需给父容器加flex-wrap: wrap即可
2. 绿色导航区域的尺寸完全由父容器的宽度、内边距控制，不会出现背景范围收缩的问题
3. 按钮边框会完整包裹整个按钮区域，不会仅贴合文字范围

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