技术问询：为何无序列表（ul）无法浮动到h1标题右侧？

AI 小北

2026-5-25

为啥无序列表（ul）没法浮动到h1标题右侧？

嘿，我来帮你排查下这个问题～结合你给出的HTML结构，大概率是这几个原因导致的：

缺少关键的CSS浮动样式
你只在HTML里引入了style.css，但没给需要浮动的元素设置对应的CSS规则。要让ul（或者它的父元素nav）跑到h1右边，得给目标元素加上float: right;。比如在style.css里写：
```
.main-nav ul {
  float: right;
  /* 可以去掉默认的外边距和内边距，避免排版混乱 */
  margin: 0;
  padding-left: 0;
  list-style: none; /* 可选：去掉默认的列表圆点 */
}
```
h1的块级特性占满了整行
h1是默认的块级元素，会独占一行宽度，这样后面的nav/ul根本没地方浮动到它右侧。解决办法是给h1也设置浮动，或者改成行内块元素：
```
.main-header h1 {
  float: left;
  /* 去掉默认的上下外边距，让标题和导航垂直对齐更舒服 */
  margin: 0;
}
```
HTML结构有小错误
你提供的代码里，Portfolio的链接标签没闭合：
```
<li><a href = "portfolio.html">Portfoli...</li>
```
应该改成：
```
<li><a href="portfolio.html">Portfolio</a></li>
```
虽然这个错误不会直接导致浮动失效，但会破坏HTML结构完整性，可能影响浏览器的样式渲染，建议先修复。