0

我对这个例子有疑问：http: //jsfiddle.net/JYkUS/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FSou1::Верстка макета</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="logo-wrapper">
            <div class="logo">
                <a href="#">
                    <img src="images/logo.png" alt="Logo" width="90" height="90" />
                </a>
            </div>
            <div class="logo-text">
                <span>Happy Nanny</span>
            </div>
            <div class="menu">
                <ul>
                    <li class="first"><a href="#">HOME</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">NEWS & PRESS</a></li>
                    <li><a href="#">FIND JOB</a></li>
                    <li><a href="#">CONTACTS</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>  
    </body>
</html>

跨度与文本

<span class="easy-way">THE EASY WAY</span>

默认有margin-left，但我不知道为什么。我真的不想为左边距设置一个负值。是否可以将此跨度与左边框对齐，为什么它现在具有这样的值的边距？

PS 在谷歌浏览器中观看（firefox 没有这个边距）

在此处输入图像描述

编辑：

就当我删除这种风格：

.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}

我的跨度到左边界 =\ 但为什么会这样？

EDIT2：其他方式，<div class="clear"></div>从'logo-wrapper'容器移动到根级别

<div class="logo-wrapper">
            <div class="logo"></div>
            <div class="logo-text"></div>
            <div class="menu"></div>
            <!-- FROM HERE -->
        </div>

        <div class="clear"></div> <!-- MOVE HERE -->

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>

但是还是不明白，为什么inner clear:both div后浮动仍然有效

EDIT3：是因为浮动：右菜单甚至比带有clear：both的div更“正确”吗？

4

2 回答 2

1

边距实际上应用于 body 标签。您可以使用以下方法将其删除：

body {
    background: none repeat scroll 0 0 #F8F7E5;
    font-family: Arial;
    font-size: 100%;
    margin-left: 0;
    margin-top: 40px;
}

工作示例：http: //jsfiddle.net/JYkUS/2/

这通常使用reset.css从页面中删除所有浏览器特定样式的文件来处理，因此您可以在创建跨浏览器兼容网页时从单个基点开始。我建议将这种策略应用于该站点。

于 2013-03-07T10:41:16.727 回答
0

那是因为你没有设置margin身体0

做了margin:40px 0 0 0

body {
    margin: 40px 0 0 0;
    font-size: 100%;
    font-family: Arial;
    background: #f8f7e5;
}

演示

于 2013-03-07T10:43:28.823 回答