Question

我在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;
}

与往常一样，非常感谢帮助。

Answer 1

确保您的CSS和HTML有效。正如其他人所指出的，没有float:mid-left这样的东西。此外，如果您的jsfiddle指示您的HTML，您可能会将浏览器投入quirksmode，因为您的HTML格式不正确（您的前三个标记需要包含在<head>标记中，所有内容都需要包含在<html>标记中，第一行应该是<!DOCTYPE html>）。使用W3C的HTML validator和CSS validator来确保您的代码正确无误。只有这样才能开始解决其他问题。
了解各种CSS声明的作用。虽然您的CSS可能有效，但并不意味着它是正确的。这样：#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }将在浮动部件固定后进行技术验证。但是，position: absolute和float是互斥的 - 当position为绝对值或固定值时，float不起作用。它还有助于了解padding和margin如何影响元素的定位，以及它们之间的差异。最后，vertical-align根本不起作用，除非元素是表格单元格，或者display设置为table-cell（并且与表格相关的一组显示属性有其自己的怪癖，所以你不一定只是在元素上抛出display: table-cell并期望它以某种方式工作。）
了解元素如何自然地表现，以便您可以使用而不是反对它们。确保您知道块，内联和内联的方式-block元素的行为，然后与它们一起使用以获得所需的布局，而不是在所有内容上抛出display: inline-block并希望获得最佳效果。链接之类的东西也是如此（在悬停时自然会有cursor: pointer，除非你在其他地方禁用它）。这样做可以大大清理CSS，使维护更容易。它也可能会清理你的HTML，因为你会发现你真正需要或不能使用的包装元素。

Answer 2

即使使用上面包含的屏幕截图，也很难分辨出较小或“移动”宽度的预期结果是什么。

您的HTML看起来也存在许多问题。请注意<font>标记之类的内容（自HTML4起已弃用）。

也就是说，修复你的CSS中的内容，例如float: mid-right和float: mid-left这些都是无效的，应该会有所帮助。此外，您可能需要调查CSS positioning - 具体而言，您可能希望在position: relative div上使用#header。

看看这个slightly cleaned up version of your example - 添加了背景颜色，以查看标题的结束位置以及导航占用的空间。

Answer 3

看起来你有很多问题但是如果没有看到你的HTML也很难分辨。对于初学者，如果您尝试在左边缘对齐，#menu { margin-left:550px; }将成为问题的一部分。您还应该知道float:mid-right;不是有效的CSS。有关float的更多信息，请查看http://www.w3schools.com/cssref/pr_class_float.asp。

在JSFIDDLE之后编辑

将<div id='header'>放入<div id='main'>内，并将#menu css更改为： `

#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}

`

由于您已在菜单上定义了宽度，因此可以使用margin: 0 auto;根据窗口大小使其保持居中。这样您就可以删除margin-left，并防止它被推到右侧。

标题CSS破坏

3 个答案: