Question

这是我的css文件和我的html文件，我在我的标题中做了一个div标签，并给它一个类名zebusoft-logo所以我用cze中的.zebusoft-logo称之为但是当我使用边距时-left：400px;它根本没有移动徽标。为什么这样，我该如何解决？

风格/ main.css的

html, body {
    padding: 0;
    margin:0;
}

header  {
    position:fixed;
    top:0;
    width:100%;
    height:102px;
    background-color:#222;
    padding:20px;
}

footer {
    background: #222;
    width: 100%;
    height: 370px;
    bottom: 0;
    position: fixed;
}

.zebusoft-logo {
    padding: 0;
    top: 0;
    position: fixed;
    margin-left: 400;
}

的mypage.html

<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
    <div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
    <div></div>
</body>

Answer 1

简化测试表明这应该有效，前提是您为保证金设置单位（px）。

你有：

margin-left: 400;

你需要：

margin-left: 400px;

Answer 2

在你的CSS中......

.zebusoft-logo {
    padding: 0;
    top: 0;
    position: fixed;
    margin-left: 400;
}

您将margin-left设置为400，但未指定要使用的 unit 。您必须指定单位，除非该值为零，因此padding: 0;可以，但margin-left: 400;是非法的。
请参阅CSS3值和单位§4.4 Numbers with Units: dimensions中的维度定义。

我假设您需要像素，因此您的保证金必须设为margin-left: 400px;

你的html也没有正确构建......

<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
    <div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
    <div></div>
</body>

您错过了<head>元素，即<title>和您的样式表链接所在的元素，而您的<header>必须位于页面的<body>内：

<!doctype html>
<html>
<head>
    <title>Joes Nose</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header>
        <div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
    </header>

    <div>...</div>
</body>
</html>

Answer 3

我认为您可能需要重新格式化您的HTML，这将解决问题。

<html>
<head>

<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<style>
    html, body {
        padding: 0;
        margin: 0;
    }






    header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 102px;
        background-color: #222;
        padding: 20px;
    }

    footer {
        background: #222;
        width: 100%;
        height: 370px;
        bottom: 0;
        position: fixed;
    }

    .zebusoft-logo {
        padding: 0;
        top: 0;
        position: fixed;
        margin-left: 400;
    }
</style>
</head>
<body>
<header>
    <div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<div></div>
</body>
</html>

HTML5 CSS3为什么我的带有类名的div标签不会移动我的边距？

3 个答案: