将一个元素右对齐并在其他两个元素下对齐答案

【问题标题】：Aligning an element to the right and under two other elements将一个元素右对齐并在其他两个元素下对齐
【发布时间】：2021-11-04 14:04:24
【问题描述】：

我试图在两个标题下放置一个无序列表。我目前有两个标题向右对齐并向右浮动，它们似乎处于正确的位置。但是，当我尝试将无序列表对齐并向右浮动或使用边距时，它会转到页面上非常奇怪的位置。

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

ul {
  list-style-type: none;
  align: right;
  float: right;
  padding: 0px;
  width: 200px;
  background-color: greenyellow;
  text-align: center;
  border: 2px solid yellow;
}

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;
}

h1 {
  float: right;
  align: right;
  font-family: Helvetica;
  font-size: 50px;
  padding-right: 10px;
}

h2 {
  float: right;
  align: right;
  font-family: Helvetica;
  font-size: 30px;
  margin-left: 1200px;
  padding-right: 30px;
}

<h1>Welcome to ENlightenment!</h1>
<h2>Can you feel the love?</h2>
<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>

这是一张解释我想要做什么的图片： Webpage plan

【问题讨论】：

标签： html css css-float html-lists margin

【解决方案1】：

最好的方法是Flex Box。

我编辑了您的代码的某些部分以查看。随着CSS3的到来，人们不会再用float/position来做这种事情了。

<!DOCTYPE html>
<html>
    <head>
        <title>ENlightenment</title>
    </head>
    <body>
        <style>
            body {
                background-color: forestgreen;
                color: yellow;
            }
            ul {
                list-style-type: none;
                padding: 0px;
                width: 200px;
                background-color: greenyellow;
                text-align: center;
                border: 2px solid yellow;
            }
            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;
            }
            h1 {
                /* float: right; */
                font-family: Helvetica;
                font-size: 50px;
                padding-right: 10px;
            }
            h2 {
                /* float: right; */
                font-family: Helvetica;
                font-size: 30px;
                /* margin-left: 1200px; */
                padding-right: 30px;
            }

            .navBar {
                display: flex;
                justify-content: space-between;
            }
        </style>
        <h1>Welcome to ENlightenment!</h1>
        <div class="navBar">
            <h2>Can you feel the love?</h2>
            <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>
        </div>
    </body>
</html>

【讨论】：

谢谢！我希望避免使用 flex，因为我还没有完全理解它，但这会起作用。