即使我说它向左浮动，或向右浮动，它仍然在另一行

Question

我为我的网站做了一个菜单和导航，但出于某种原因他一直把 "Credits" 页面放在第二行，而不是和我的主页放在同一行 link 因为我做了 float: rigth; 和 float: left;.

这是我的 html:

<!DOCTYPE html/>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>My Webpage</title>
            <link rel="stylesheet" href="sheets/main.css"/>
        </head>
        <body>
            <div class="titlebackground">
            <h1 class="title"> My Webpage </h1>
            </div>
            <div class="menuitem home"><p><a href="index.html">Home</a></p></div>
            <div class="menuitem contact"><p><a href="other_pages/contact.html">Contact</a></p></div>
            <div class="article">Hello</div>
            <div class="article">Hello2</div>
        </body>
    </html>

和CSS：

body{
    font-family: Arial;
}

.article {
    float: left;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid blue;
}

.title{
    color:white;
    background-color:black;
    padding: 20px 20px 20px 20px;
    margin: 10px 540px 10px 540px;
    border: 8px outset red;
    border-radius: 10px;
    font-size: 30px;

}

.titlebackground{
    margin: 0px 0px 0px 0px;
    background-image:url(../images/titlebackground.jpg);
    border: 8px groove red;
}

.menuitem{
    float: rigth;
}

.contact{
    margin: 10px 540px 10px 0px;
}

.home{
    margin: 10px 540px 10px 540px;
}

a:link{
    color:#FF0000;
    background-color:white;
    border: 5px solid red;
    padding: 5px 5px 5px 5px;
}

a:hover{
    color:#FF0000;
    background-color:white;
    border: 5px outset red;
    background-image:url(../images/titlebackground.jpg)
}

a:active{
    color:#FF0000;
}

a:visited{
    color:#FF0000;
}

Answer 1

首先，rigth应该是right:

.menuitem{
    float: right;
}

其次，尝试将 .contact 和 .home 的边距缩小到 120px 以在同一行上看到它们：

.contact{
    margin: 10px 120px 10px 0px;
}

.home{
    margin: 10px 120px 10px 120px;
}

最后，将 clear: right 添加到您的 .article:

.article {
    clear: right;
    float: left;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid blue;
}

工作示例：http://codepen.io/anon/pen/PwmoeR

即使我说它向左浮动，或向右浮动，它仍然在另一行

Even If I said it to float left, or rigth it stays in the other row

html

css

css-float