Question

当我试图给我的徽标一个位置时，它在我的屏幕上看起来没问题。但是，如果我将屏幕缩小或从手机浏览，则徽标会移动到中心或从标题中出现故障。菜单有同样的问题。为什么会这样？

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

你的利润率很高。这就是为什么他们在小屏幕上看起来像那样。徽标有这种风格：

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

这样可以获得350px的保证金，之后你在400px的菜单上有一个巨大的余量，你将它们加到比普通设备分辨率本身更大的位置。

Answer 2

我认为您正试图将这些内容集中在标题中。（如果你是，那你就错了：P）

你应该在某种容器上使用margin:0 auto;。

我想你想要这样的事情：

<强> HTML

<div class="header">
  <div class="margin-center">
    <div id="logo">
      LOGO
    </div>
    <div id="nav">
      stuff on the right
    </div>
  </div>
</div>

<强> CSS

.header{width:100%;}
.margin-center{margin:0 auto;max-width:960px;}
#logo{float:left;}
#nav{float:right;}

编辑：由于你在那里的所有其他风格，它可能没有用。

如果可以的话，请试试这个 -

将其添加到您的CSS

.margin_center {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    top: 19px;
    min-width: 600px;
}
#headnav {
    float: right;
}

在您的CSS中更改

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

到

#logo {
    float: left;
}

并更改此

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

到

.navigation {
    list-style: none;
    font-family: Arial;
}

并更改此HTML

<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="header">
    <div class="margin_center">
        <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>

Answer 3

根据您的评论，您需要左侧的徽标图片以及右侧的导航文字。最简单的解决方案是将图像向左浮动，向右浮动导航，并清除浮动。

然后您的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 class="clear"></div>
        </div>
...

然后在你的CSS中：

#logo {
    float: left;
}
.navigation {
    float: right;
}
.clear {
    clear: both;
}

我做了一个JSFiddle示例。（图像具有明显更大的尺寸以使其更明显，仅供参考。您可以调整“结果”面板的大小以查看差异。）

CSS位置在不同的屏幕上

3 个答案: