Question

我已经为我的网站制作了一个菜单，导航，但出于某种原因，他一直在使用＆＃34; Credits＆＃34;页面到第二行，而不是与我的主页链接在同一行，因为我做了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

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

1 个答案: