将一个元素向右对齐并位于其他两个元素的下方

Question

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

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

Answer 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>

将一个元素向右对齐并位于其他两个元素的下方

Aligning an element to the right and under two other elements

html

css

css-float

html-lists

margin