0

出于某种原因，我在示例图像中的元素不会与页面顶部对齐。我有一段时间没有使用 HTML/CSS，但我看不到任何可以将矩形向下移动约 5px 的编码方式。在此处输入图像描述

我正在尝试在此页面上实现栏：http: //gradients.glrzad.com/

这是我的代码。HTML：

<!DOCTYPE "html">
<html>
<head>
<title>Mobile Site</title>
<link href="mobileCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="titleBar">
<strong>Coles Web</strong>
</div>
<div id="container">



</div>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body{
    background-color:#666;
}
#container{
    width:auto;

}

#titleBar{
    position:fixed;
    position:relative;
    width:auto;
    height:15px;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:small;
    color:#00FFFF;
    background-color:#000;
    box-shadow:0 3px 5px #333333;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}


.bubble{
    width:auto;
    height: 40px;
    position:relative;
    border-spacing: 3px;
    background-color:#0FF;
    border-radius:3px;
    font-family:Impact, Verdana, Geneva, sans-serif;
    text-align:center;

}

提前致谢！

4

2 回答 2

2 
body{
    background-color:#666;
    padding: 0;
    margin:0;
}
于 2013-02-03T03:13:02.100 回答
0

将以下内容添加到#titlebar：

top:0;
left:0;

此外，您只能拥有一个职位。相对的或固定的。

于 2013-02-03T05:21:01.133 回答