如何使导航栏（nav bar）保持单行显示且不受侧边栏（sidebar）调整影响？

<!DOCTYPE html> 
<html> 
<head> 
<!-- Displayed on tab --> 
<title>FBLA -</title>
<!-- Tells the browser which character set to use --> 
<meta charset="utf-8">
<!-- Defines a description for our web page --> 
<meta content= "A Future Business Leaders of America chapter website dedicated to giving our members the most accurate and updated information." name="description">
<!-- Defines keywords for search engines (Googles, Firefox, Safari, etc.) --> 
<meta content="" name="keywords">
<!-- Defines author(s) of the webpage --> 
<meta content="Jabari" name="author"> 
<!-- Makes sure our website looks similar or the same on every device --> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 
<!-- Links an external style sheet to the HTML page --> 
<link href="Websites/FBLA Website/styles/style.css" rel="stylesheet"> 
</head> 
<body> 
<!-- Defines header of the webpage --> 
<header> 
<h1>FBLA Chapter</h1> 
<!-- Makes a horizontal navigation bar --> 
<ul> 
<li><a class="what-im-looking-at" href="index.html">Home</a> 
</li> 
<li><a href="chapter.html">Our Chapter</a> 
</li> 
<li><a href="members.html">For Our Members</a> 
</li> 
<li><a href="comp.html">Competition</a> 
</li> 
<li><a href="contact.html">Contact Info</a> 
</li> 
</ul> 
</header> 
<div id="main"> 
<h2 id="title-home">FBLA - Homepage</h2> 
</div> 
<div id="sidebar"> 
<h2 id="title-remind">Remind</h2> 
<p id="remind-link">New to FBLA? Sign up for Remind to receive reminders about meetings events, etc.<br> Text: @<br> To:81010<br></p> 
<h2 id="title-calender">Upcoming 2018-19 Events</h2> 
<p id="calender-2018-19"><i>August</i><br> Aug. 1 - Chapter Challenge - "Supper Sweeps" begins<br> Aug. 31 - Officer applications are due<br> <br> <i>September</i><br> Sept. ?? to Sept. ?? - Club Week<br> Sept. 19 - First Meeting 2pm - 3pm<br> Sept 24 - Membership Dues are <b>due</b><br> Sept 27 - Installation Ceremony<br> <br> <i>October</i> Oct. ?? - Chapter Challenge -Super Sweets ends.<br> <br> <br></p> 
</div> 
</body> 
</html>

h1 { text-align:center; color:white } 
body { background-color:darkgreen; font-family:"New Times Roman"; } 
ul { list-style:none; margin:0; padding:0; overflow:hidden; background-color:white; border-radius:5px; } 
li { float:left; } 
li a { display:block; color:black; text-align:center; padding:15px 95.5px; text-decoration:none; } 
li a:hover { background-color:darkred; } 
#title-remind, #title-calender { text-align:center; font-size:16px; padding-top:1em; } 
.what-im-looking-at { background-color:darkred; } 
#main { background-color:white; border-radius:5px; width:1000px; height:auto; } 
#title-home { text-align:center; padding:0; } 
#sidebar { border-radius: 5px; background-color:white; width:330px; margin-left:1014.5px; margin-top:-46.5px; } 
#remind-link, #calender-2018-19 { text-align:center; }

当我增大sidebar的尺寸时，顶部的nav bar就无法保持在同一行显示。我希望实现nav bar始终保持单行，同时能够自由扩展sidebar以添加更多活动信息。由于我刚接触编程，不知道如何解决这个问题，恳请指教。

嘿，Jabari！刚入门前端遇到布局问题太正常了，咱们一步步来把这个问题搞定~

你的核心问题出在固定宽度布局+负margin定位侧边栏的方式上，这种写法非常脆弱，稍微调整元素尺寸就会打乱整体布局。咱们换成更现代的Flexbox布局，既能保证导航栏始终单行，又能让侧边栏自由扩展内容。

步骤1：调整HTML结构 #

先把main和sidebar放进一个统一的容器里，方便我们用Flexbox控制它们的排列：

<!-- 在header之后添加这个容器 -->
<div class="content-container">
  <div id="main"> 
    <h2 id="title-home">FBLA - Homepage</h2> 
  </div> 
  <div id="sidebar"> 
    <!-- 侧边栏原有内容保持不变 -->
  </div>
</div>

步骤2：修改CSS样式 #

把原来的固定宽度、负margin全部替换掉，用Flexbox实现弹性布局：

/* 给body加基础样式，避免内容贴边 */
body { 
  background-color:darkgreen; 
  font-family:"New Times Roman"; 
  margin: 0;
  padding: 0 10px; /* 左右留一点边距，更美观 */
}

/* 导航栏用Flexbox实现自动均分宽度，保证始终单行 */
ul { 
  list-style:none; 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  background-color:white; 
  border-radius:5px;
  display: flex; /* 开启Flexbox布局 */
} 

li { 
  flex: 1; /* 每个导航项自动平分导航栏宽度 */
} 

li a { 
  display:block; 
  color:black; 
  text-align:center; 
  padding:15px; /* 去掉固定的95.5px padding，让flex自动分配空间 */
  text-decoration:none; 
} 

/* 内容容器：用Flexbox让main和sidebar并排 */
.content-container {
  display: flex;
  gap: 14px; /* 给main和sidebar之间留空隙，替代原来的margin-left */
  margin-top: 10px; /* 和导航栏之间留一点距离 */
}

/* 主内容区：占据容器剩余空间，设置最小宽度避免太窄 */
#main { 
  background-color:white; 
  border-radius:5px; 
  flex: 1; /* 自动占据容器剩余的所有空间 */
  min-width: 600px; /* 保证主内容区不会被挤得太窄 */
  padding: 0 10px;
} 

/* 侧边栏：可以自由调整宽度，甚至去掉宽度让它自适应内容 */
#sidebar { 
  border-radius: 5px; 
  background-color:white; 
  width: 330px; /* 你可以根据需要随便改这个宽度，不会影响导航栏 */
  padding: 0 10px;
} 

/* 以下原有样式保持不变 */
h1 { text-align:center; color:white } 
li a:hover { background-color:darkred; } 
#title-remind, #title-calender { text-align:center; font-size:16px; padding-top:1em; } 
.what-im-looking-at { background-color:darkred; } 
#title-home { text-align:center; padding:0; } 
#remind-link, #calender-2018-19 { text-align:center; }

为什么这样改？ #

1. 导航栏用Flexbox：flex:1让每个导航项自动平分导航栏宽度，不管屏幕尺寸怎么变（只要不是特别窄），导航项都会牢牢待在同一行，不会换行。
2. 内容区用Flexbox容器：content-container作为父容器，让main和sidebar稳定并排，main会自动占据剩余空间，sidebar可以随便调整宽度或者添加内容，完全不会影响导航栏的布局。
3. 去掉脆弱的负margin定位：这种写法完全依赖固定数值，稍微调整就会错位，Flexbox是更稳定、更易维护的布局方案。

如果之后想让页面在手机等小屏幕上也正常显示，还可以加个媒体查询，让内容自动变成垂直排列：

@media (max-width: 1000px) {
  .content-container {
    flex-direction: column;
  }
  #sidebar {
    width: auto;
    margin-top: 10px;
  }
}

现在你试试改改sidebar的宽度或者添加更多活动内容，导航栏肯定会稳稳保持单行啦~

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