Html 标题CSS断开

我在CSS/设计方面非常糟糕，所以我在这里遇到了一些CSS

当以1920x1080的速度加载到全屏浏览器中时，页面看起来很好，但是，一旦将页面最小化或加载到移动设备上，页眉内容就完全失去了位置，但正文很好

以下是有问题的CSS元素：

#header { 
background: url(assets/header_bckg.gif) repeat-x ; height:120px;  
}

#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}


#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}


#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }

#avatar_online {
    background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
    filter: none;
    height: 50px;
    width: 50px;
    padding: 3px;
    background-color: #545454;
    border-radius: 3px 3px 3px 3px; 
    }

#avatar_offline {   
    background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
    filter: none;
    height: 50px;
    width: 50px;
    padding: 3px;
    border: 1px solid #545454;
    border-radius: 3px 3px 3px 3px; 
    }
    #avatar_playing {   
        background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
    filter: none;
        height: 50px;
    width: 50px;
    padding: 3px;
    border: 1px solid #545454;
    border-radius: 3px 3px 3px 3px; 
    }

#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover { 
    color: #85B0DF;
    cursor: pointer;
    text-decoration: none;
}

---

一如既往，我们非常感谢您的帮助。

看起来您遇到了多个问题，但是如果没有看到您的HTML，很难判断。对于初学者来说，

#菜单{margin left:550px；}

将是问题的一部分，如果您试图在左侧边缘对齐。。您还应该知道

float:mid-right不是有效的CSS。有关
float
的更多信息，请查看

在JSFIDDLE之后编辑

将您的
放入
中，并将您的
#菜单更改为：
`

`

由于菜单上已经定义了宽度，因此可以使用
margin:0 auto以根据窗口大小使其居中。这将允许您删除左边的
边距
，并防止其被推到右边。
看起来您有多个问题，但如果不同时查看HTML，则很难判断。对于初学者来说，
#菜单{margin left:550px；}
将是问题的一部分，如果您试图在左侧边缘对齐。。您还应该知道
float:mid-right不是有效的CSS。有关
float
的更多信息，请查看

在JSFIDDLE之后编辑

将您的
放入
中，并将您的
#菜单更改为：
`

`

由于菜单上已经定义了宽度，因此可以使用
margin:0 auto以根据窗口大小使其居中。这将允许您删除左边的
边距
，并防止其被推到右边。
即使使用上面包含的屏幕截图，也很难判断较小或“移动”宽度下的预期结果

看起来你的HTML也有很多问题。小心使用
标记之类的东西（从HTML4开始就不推荐使用）

也就是说，修复CSS中的一些东西，比如
float:mid-right
和
float:mid-left
，它们都是无效的，应该会有所帮助。此外，您可能需要进行调查——具体来说，您可能需要在
#header
div上使用
位置：relative

看看这个-添加背景色以查看标题结束的位置以及导航所占的空间。
即使使用上面包含的屏幕截图，也有点难以判断较小或“移动”宽度下的预期结果

看起来你的HTML也有很多问题。小心使用
标记之类的东西（从HTML4开始就不推荐使用）

也就是说，修复CSS中的一些东西，比如
float:mid-right
和
float:mid-left
，它们都是无效的，应该会有所帮助。此外，您可能需要进行调查——具体来说，您可能需要在
#header
div上使用
位置：relative

看看这个-添加背景色以查看标题结束的位置以及导航占用的空间

确保你的CSS和HTML是有效的。正如其他人所指出的，没有所谓的
float:mid left
。此外，如果您的JSFIDLE表示您的HTML，那么您可能正在将浏览器放入，因为您的HTML结构不正确（前三个标记需要包装在
标记中，所有内容都需要包装在
标记中，第一行应该是
）。使用W3C的和来确保您的代码是正确的。只有这样，您才能开始解决其他问题

了解各种CSS声明的作用。虽然您的CSS可能有效，但并不意味着它是正确的。此：
#avatar{显示：内联块；位置：绝对；边距顶部：28px；浮动：右中；左填充：505px；底部填充：15px；垂直对齐：中间；}
将在浮动部分固定后进行技术验证。但是，
position:absolute
和
float
是互斥的——当
position
为绝对或固定时，float不起作用。它还将有助于了解
填充
和
边距
如何影响元素的位置，以及它们之间的差异。最后，
vertical align
根本不起作用，除非元素是一个表格单元格，或者
display
设置为
table cell
（与表格相关的一组显示属性有它自己的怪癖，所以你不必只在元素上抛出
display:table cell
，并期望它以某种方式工作）

了解元素的自然行为，以便您可以使用它们，而不是对抗它们。确保您知道块、内联和内联块元素的行为，然后使用它们来获得所需的布局，而不是在所有内容上抛出
display:inline block
，并希望达到最佳效果。类似链接的情况也是如此（除非您在其他地方禁用了它，否则自然会将
cursor:pointer
置于悬停状态）。这样做将大大清理CSS，使其更易于维护。它还可以清理HTML，因为您可以找到真正需要或不需要的包装器元素

确保你的CSS和HTML是有效的。正如其他人所指出的，没有所谓的
float:mid left
。此外，如果您的JSFIDLE表示您的HTML，那么您可能正在将浏览器投入其中，因为您的HTML结构不正确（您的第一个
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}