将一个元素向右对齐并在其他两个元素下方

wanwandrew

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

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>ENlightenment</title>
</head>
<body>
    <style>
        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;
        }
    </style>
    <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>
</body>
</html>

这是一张解释我想要做的事情的图片：网页计划

埃尔凡M。

最好的方法是这样做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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。