如何修复nav导航栏内ul元素溢出、无法放置在logo旁的问题

问题根因 #

• 原nav使用块级布局，内部承载logo的p标签默认是块级元素，会独占整行，导致ul被迫换行
• ul设置了width:100%，同时添加了35%的左边距，总宽度超出100%，自然会溢出nav容器范围
• li使用浮动布局没有做清除浮动处理，也会加剧宽高溢出的问题

修复方案 #

推荐使用Flex布局重构导航栏，无需改动原有HTML结构，实现逻辑简单、适配稳定性更高，修改后的完整CSS代码如下：

*{
  margin: 0;
  box-sizing: border-box; /* 统一盒模型规则，边框、内边距不会撑大元素宽度 */
}
nav{
  display: flex; /* 替换原有display: block */
  align-items: center; /* 子元素垂直居中 */
  justify-content: space-between; /* 左右两端对齐，logo在左，导航列表在右 */
  padding: 0 2rem; /* 左右预留内边距，避免内容贴边 */
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.266);
  height: 3.2em;
  width: 100%;
}
/* 适配logo样式，覆盖p标签默认边距 */
.gradient-text {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}
ul.nav-list{
  list-style: none;
  display: flex; /* 让li直接横向排列，无需浮动 */
  gap: 1.5rem; /* 控制导航项之间的间距 */
  margin: 0;
  padding: 0;
}

ul.nav-list li{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

nav a{
  padding-bottom: 2px; /* 替换原有百分比值，固定像素表现更稳定 */
  text-decoration: none;
  color: #333;
}

修改后即可实现logo在左、导航列表在logo右侧同栏展示的效果，不会溢出nav容器，且内容垂直居中，适配不同屏幕宽度的表现更稳定。

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