如何将无序列表右对齐并放置在两个标题元素的下方

问题原因 #

1. 你给h1、h2都设置了右浮动，浮动元素会脱离正常文档流，后续的ul没有做浮动清除，所以会受到前面浮动元素的影响出现位置偏移。
2. 代码中的align: right是无效CSS属性，文本对齐需要用text-align。
3. h2设置的margin-left: 1200px是固定数值，在不同屏幕宽度下会出现错位，没有实际作用。

修复方案 #

首先调整HTML结构，把两个标题放在同一个父容器中统一控制，避免多个独立浮动元素互相干扰：

<div class="header-container">
  <h1>Welcome to ENlightenment!</h1>
  <h2>Can you feel the love?</h2>
</div>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Programming</a></li>
  <li><a href="#contact">Japanese</a></li>
  <li><a href="#about">Russian</a></li>
  <li><a href="#about">Video Games</a></li>
  <li><a href="#about">Music</a></li>
</ul>

对应的CSS修改如下：

body {
  background-color: forestgreen;
  color: yellow;
}

/* 标题容器统一控制右对齐 */
.header-container {
  text-align: right;
  padding-right: 30px;
  font-family: Helvetica;
}

h1 {
  font-size: 50px;
  margin: 10px 0;
}

h2 {
  font-size: 30px;
  margin: 10px 0 25px;
}

ul {
  list-style-type: none;
  float: right;
  padding: 0;
  width: 200px;
  margin-right: 30px;
  background-color: greenyellow;
  text-align: center;
  border: 2px solid yellow;
  /* 清除右侧浮动，确保列表在标题下方 */
  clear: right;
}

li a {
  display: block;
  margin: 0;
  padding: 8px 16px;
  color: darkcyan;
  text-decoration: none;
  font-family: Helvetica;
}

li a.active {
  background-color: yellow;
  color: red;
}

li a:hover:not(.active) {
  background-color: skyblue;
  color: forestgreen;
  text-decoration: underline wavy brown;
}

修改后标题会统一在页面右上角右对齐，导航列表会自动排列在标题下方的右侧区域，适配不同屏幕宽度不会出现错位。

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