html - 不同屏幕上的 CSS 位置

Question

当我尝试为我的 Logo 指定位置时，它在我的屏幕上看起来不错。但是，如果我将屏幕变小或从手机浏览，则 Logo 会移动到中心或出现故障。菜单有同样的问题。为什么会这样？

CSS:

#logo {
    margin-left: 20%;
    padding: 20px;
    float: left;
}

.navigation {
    list-style: none;
    font-family: Arial;
    float: left;
    margin-left: 400px;
    margin-top: 20px;
}

.navigation li {
     display: inline-block;
     margin: 10px;
}

HTML:

<header>
    <div class="header">
    <div id="logo"><img src="img/logo.png"></div>
        <div id="headnav">
            <ul class="navigation">
                <li>Home</li>
                <li>Shop</li>
                <li>Rank</li>
                <li>Free</li>
            </ul>
        </div>
    </div>
    <div class="secondheader">
    </div>
    <div class="thirdheader">
    </div>
</header>

Answer 1

您的利润太大了。这就是为什么它们在小屏幕上看起来像那样。 Logo 具有这种风格:

margin-left: 350px;
padding: 20px;
float: left;

这给了它 350 像素的边距，之后你在菜单上有 400 像素的巨大边距，在你把它们加起来比正常的设备分辨率本身更大。