CSS/HTML布局问题：元素移位与导航栏hover动画失效求助

一、H1元素与图片的排版问题 #

问题原因 #

1. 导航栏的li使用float:left后，父元素ul高度塌陷，导致后续的H1和图片受浮动元素影响，调整margin-top时会连带导航栏移位。
2. margin-top: down是无效CSS写法，且直接用float排列H1和图片无法精准控制H1的垂直位置。

修复方案 #

• 给导航栏的ul添加清除浮动的样式，解决高度塌陷问题。
• 将H1和图片放入统一容器，用Flex布局实现H1在图片左侧靠下的排版。

修改后的完整代码：

body {
  background-color: black;
  margin: 0; /* 清除默认边距 */
}

/*Navigation Menu*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 清除浮动，解决高度塌陷 */
}

ul li {
  float: left; /* 将float移到li上，布局更合理 */
}

ul li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 30px 50px; /* 用padding替代margin，扩大点击区域 */
  font-size: 20px;
}

.active {
  color: rgb(255, 0, 0);
}

/* 图片与标题容器 */
.img-title-container {
  display: flex;
  align-items: flex-end; /* 垂直方向靠下对齐 */
  margin: 100px 50px 0;
}

.IMG1TEXT {
  color: white;
  margin: 0; /* 清除默认边距，避免影响对齐 */
  margin-right: 20px; /* 与图片保持间距 */
}

.IMG1 {
  border: 5px solid white;
  height: 350px;
}

<body>
  <!--Navigation-->
  <nav>
    <ul>
      <li><a class="active" href="#">Photo's</a></li>
      <li><a href="#">Films</a></li>
      <li><a href="#">Trips</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="img-title-container">
    <h1 class="IMG1TEXT">Portofino, </h1>
    <img class="IMG1" src="img/Portofino1.png" height="350">
  </div>
</body>

二、导航链接hover下划线淡入动画问题 #

问题原因 #

text-decoration: underline是离散属性，无法通过transition实现平滑过渡动画，所以之前的设置无效。

修复方案 #

使用伪元素::after模拟下划线，通过过渡伪元素的宽度实现淡入展开效果，同时兼容active状态的红色下划线。

修改后的导航链接样式（替换原导航相关的hover和active样式）：

ul li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 30px 50px;
  font-size: 20px;
  position: relative; /* 为伪元素定位做准备 */
}

/* 下划线动画基础样式 */
ul li a::after {
  content: '';
  position: absolute;
  bottom: 25px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: white;
  transition: all 0.5s ease-out;
  transform: translateX(-50%);
}

/* hover时展开下划线 */
ul li a:hover::after {
  width: 80%;
}

/* 激活状态的红色下划线 */
.active {
  color: rgb(255, 0, 0);
}
.active::after {
  width: 80%;
  background-color: rgb(255, 0, 0);
}

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