如何修复HTML/CSS代码实现无换行无缩进的横向导航列表？

要让<ul>内的导航项排成一行，需调整列表项的显示规则并清除<ul>的默认样式，具体方案如下：

修改后的完整代码 #

CSS 部分

@charset "utf-8";

/* CSS Document */

.header {
  background-color: white;
  color: black;
  text-align: center;
  margin: -30px;
  font-size: 50px;
}

.headimg {
  line-height: 5px;
  background-color: white;
  padding: 5px;
  width: 180px;
}

.navi {
  margin-top: 0;
  padding-left: 0; /* 清除浏览器默认的左内边距，解决缩进问题 */
  display: inline-flex; /* 让列表和Logo在同一行，同时内部项横向排列 */
  gap: 20px; /* 导航项之间的间距，可根据需求调整 */
  font-size: 1em;
}

.navi li {
  list-style: none; /* 去掉默认的圆点项目符号 */
}

HTML 部分（若需Logo与导航横向对齐，可添加父容器）

<div class="header-row">
  <img src="ECORUM_Logo(png).png" alt="Logo" class="headimg">
  <ul class="navi">
    <li>Home</li>
    <li>About</li>
    <li>Events</li>
    <li>Project</li>
    <li>Contact</li>
    <!-- 插入可跳转至个人账号的图片 -->
  </ul>
</div>
<hr>

补充父容器CSS（可选，用于Logo与导航垂直居中对齐）

.header-row {
  display: flex;
  align-items: center; /* 让Logo和导航在垂直方向居中 */
  gap: 30px; /* Logo与导航之间的间距 */
}

关键修改说明 #

1. 清除<ul>默认内边距：浏览器会给<ul>默认添加padding-left，直接导致缩进，通过padding-left: 0消除该样式。
2. 设置列表项为行内/弹性布局：默认<li>是块级元素，会自动换行。通过给<ul>设置display: inline-flex，既让整个列表能和Logo在同一行，又能让内部<li>横向排列；同时用list-style: none去掉默认圆点符号。
3. 间距控制：使用gap属性可以方便地给导航项、Logo与导航之间添加均匀间距，替代传统的margin写法，更简洁易维护。

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