如何让父div容器内的两个子div实现水平并排显示

你当前代码中年份选择容器#list6嵌套在季度选择容器#list2内部，导致无法直接并排，按以下步骤调整即可：

步骤1：调整HTML结构 #

将#list6移动到与#list2平级，放在父容器#kpi_type_quarter内部，调整后代码如下：

<div class="quarter dropdown-check-list" id="kpi_type_quarter">
  <!-- 季度选择容器（和年份选择容器平级） -->
  <div id="list2" class="block" tabindex="1">
    <label class="form-label">Select Quarter</label>
    <span class="anchor" onclick="getElements('list2')">Select Quarter</span>
    <ul id="list2_items" class="items">
      <li><input type="checkbox" name="quarter" value="1" id="Q1"><label for="Q1">Apr - Jun (Quarter 1) </label></li>
      <li><input type="checkbox" name="quarter" value="2" id="Q2"><label for="Q2">Jul - Sep (Quarter 2) </label></li>
      <li><input type="checkbox" name="quarter" value="3" id="Q3"><label for="Q3">Oct - Dec (Quarter 3) </label></li>
      <li><input type="checkbox" name="quarter" value="4" id="Q4"><label for="Q4">Jan - Mar (Quarter 4) </label></li>
    </ul>
  </div>
  <!-- 年份选择容器（移到和季度选择容器平级） -->
  <div id="list6" class="block" tabindex="100">
    <label class="form-label">Select Year</label>
    <span class="anchor" onclick="getElements('list6')">Select Year</span>
    <ul id="list6_items" class="items">
      <li><input type="checkbox" name="year" value="2021">2021-2022 </li>
    </ul>
  </div>
</div>

步骤2：添加CSS样式 #

给父容器设置Flex布局即可实现横向并排，样式代码如下：

#kpi_type_quarter {
  /* 开启弹性布局，子元素默认横向排列 */
  display: flex;
  /* 两个选择器之间的间距，可根据需求调整数值 */
  gap: 24px;
  /* 子元素顶部对齐，避免高度不一致时出现错位 */
  align-items: flex-start;
}

可选兼容方案（不调整HTML结构） #

如果不方便修改HTML结构，也可以直接给#list2开启弹性布局，同时设置子元素换行规则，单独指定#list6的排列位置：

#list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
/* 让季度选择的label、下拉触发按钮、选项列表占满整行 */
#list2 > .form-label, #list2 > .anchor, #list2 > .items {
  width: 100%;
}
/* 限制季度选择容器、年份选择容器的宽度，保证两个能放在同一行 */
#list2, #list6 {
  width: fit-content;
}

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