Question

我尝试了一段时间已经正确对齐我的页面。在jsfiddle它似乎看起来不错，但在我的宽屏显示器中，部分标签一直漂浮到左边并造成一团糟！我认为我在浮动时做错了......但是仍然：这是我课程中的练习，它说我需要使用这些部分作为显示：阻止并将它们与浮动对齐。

我已经被困在这一段时间了，我的课程导师不回答！希望有人能告诉我我在哪里弄错了。

HTML：

<body>
    <header class="menu">
        <a href="index.html"><img class="imglogo" src="img/TotalLogo.png"></a>
    </header>
    <section class="apres">
        <p>Para&iacuteso dos Nerds</p>
        <img src="img/Personagens.png">
        <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
    </section>            
    <nav class="menu">
        <ul>
            <li><a href="index.html">Total Control</a></li>
            <li><a href="consoles.html">Consoles</a></li>
            <li><a href="jogos.html">Jogos</a></li>
            <li><a href="quiz.html">Quiz</a></li>
            <li><a href="compras.html">Compras</a></li>
        </ul>
    </nav>
    <footer class="ender">
        <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
            Tel: (21) 1234-5678<br>
            <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
        </p>
    </footer>
</body>

CSS：

root { 
    display: block;
}
body {
    background-color: #CCCCCC;
    color: #4466AA;
    font-size: 16px;
    font-family: Verdana, Liberation;

}
a{
    text-decoration: none;
    display:block;

}
a:visited{
    color:#0000FF;
}
a:link{
    color:#0000EE;
}
.menu{
    color:#0000EE;
    list-style-image:url(img/cogumelo.png);
    width:170px;

    line-height:50px;

}
.ender{
    text-align:center;
    font-size:16px;
    padding-top:15px;
    border-top:3px solid;
}
.apres{
    text-align:center;
    font-size:18px;
    font-weight:bold;
}
.imgLogo{
    border-bottom:2px solid;
}

/* Header, nav, section e footer */

header{
    display:block;
    margin-bottom:15px;
}
nav{
    display:block;
    width:240px;
    float:left;
}
section{
    display:block;
    width:540px;
    float:right;

}

footer{
    clear:both;
}

nav li:hover{
    color:#FFF;
    background: #E2E2E2;
    border-radius:5px;
    -moz-border-radius:5px;
    padding-right:3px;
    padding-left:3px;
}

jsfiddle的链接是：http://jsfiddle.net/67jrj/1/

谢谢！

Answer 1

设置标题，部分和页脚的标准宽度，或者更好，将它们全部包装在div中，为其指定一个类并为该类设置边距。没有什么叫做“root”元素，用html代替它（这就是root元素的含义）。

Answer 2

将页面宽度设置为您喜欢的内容，960px是一个很好的标准。为一个区域中浮动所需的每个元素创建一个div，然后用下一个区域清除浮动。此外，重新排列html中元素的顺序，以便它们在您需要时显示。我包括你的页面示例，至少我认为你的要求。：）

HTML：

<div class="menu">
    <ul>
        <li><a href="index.html">Total Control</a></li>
        <li><a href="consoles.html">Consoles</a></li>
        <li><a href="jogos.html">Jogos</a></li>
        <li><a href="quiz.html">Quiz</a></li>
        <li><a href="compras.html">Compras</a></li>
    </ul>
</div>

<div class="apres">
    <p>Para&iacuteso dos Nerds</p>
    <img src="img/Personagens.png">
    <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
</div>

<div class="ender">
    <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
    Tel: (21) 1234-5678<br>
    <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
    </p>
</div>
</body>
</html>

CSS：

body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}

a{
text-decoration: none;
display:block;

}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;

}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;

width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}

/* Header, nav, e footer */

.header{

display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}

nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}

希望这有帮助！

如何正确地将页面与页眉，导航，部分和页脚// HTML5和CSS对齐

2 个答案: