如何调整CSS Flexbox元素尺寸：使导航菜单保持完整且横线收缩

问题说明 #

在嵌套的Flex容器内，水平线与导航菜单相连，窗口缩小时菜单出现堆叠，而非水平线自动收缩，需要调整样式让菜单保持完整，仅水平线随窗口宽度收缩。

解决方案及修改步骤 #

• 给外层Flex容器#menu_align设置不换行规则，并垂直对齐子元素：添加flex-wrap: nowrap避免子元素换行，align-items: center让水平线和导航菜单垂直居中对齐，替代原来的margin-top实现对齐。
• 让水平线占据剩余空间并可收缩：给#line_horizontal去掉固定的width:100%，添加flex: 1，这样它会自动填充容器的剩余空间，窗口缩小时优先收缩；可额外添加min-width避免水平线缩得过窄。
• 保证导航菜单不堆叠：给#nav去掉固定宽度590px，改用Flex布局排列菜单项（替代原来的float:right），同时给菜单列表添加white-space: nowrap确保菜单项不换行；调整#nav的外边距，避免多余的右侧边距浪费空间。

修改后的代码 #

CSS 代码 #

#menu_container {
  display: flex;
  justify-content: right;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px;
  padding-bottom: 1em;
}

#menu_align {
  display: flex;
  justify-content: flex-end;
  width: 50%;
  /* 新增：禁止换行 + 垂直居中 */
  flex-wrap: nowrap;
  align-items: center;
}

#line_horizontal {
  height: 2px;
  /* 移除margin-top，改用align-items对齐 */
  /* margin-top: 30px; */
  /* 移除固定宽度，添加flex:1让它占据剩余空间并收缩 */
  /* width: 100%; */
  flex: 1;
  background: rgba(0, 0, 0, 0.50);
  /* 可选：设置最小宽度，避免水平线缩得太窄 */
  min-width: 20px;
}

#nav {
  border-style: solid;
  border-color: #000;
  /* 移除固定宽度 */
  /* width: 590px; */
  font-size: 0.9em;
  /* 调整右侧边距，避免空间浪费 */
  margin-right: 2em;
  margin-left: 1em;
  background-color: rgba(0, 0, 0, 0.1);
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}

#nav ul {
  list-style: none;
  padding-left: 0em;
  /* 改用flex布局排列菜单项，替代float */
  display: flex;
  gap: 1em;
  /* 确保菜单项不换行 */
  white-space: nowrap;
}

#nav ul li {
  /* 移除float:right */
  /* float: right; */
  padding: 0.5em;
}

HTML 代码（无需修改） #

<div id="wrapper">
  <div id="header">
    <div id="menu_container">
      <!--(flex container)100% of horizontal space across the screen-->
      <div id="menu_align">
        <!--(flex container)50% of horizontal space.Right half of the screen-->
        <div id="line_horizontal"></div>
        <nav id="nav">
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div id="logo"> </div>
  </div>
</div>

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