0

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

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>
4

3 回答 3

2

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

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

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

于 2012-08-16T21:45:38.977 回答
0

根据您的评论，您希望您的徽标图像位于左侧，导航文本位于右侧。最简单的解决方案是向左浮动图像，向右浮动导航，然后清除浮动。

那么你的 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例子。（图片有一个明显更大的尺寸以使其更明显，仅供参考。您可以调整结果面板的大小以查看差异。）

于 2012-08-16T22:10:48.303 回答
0

我认为您正在尝试将内容集中在标题中。（如果你是，你做错了：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>
于 2012-08-16T21:55:36.377 回答