0

我尝试创建一个导航栏，但是由于某种原因，我有很小的间隙，当我尝试使用边距来缩小间隙时，另一侧的间隙就会打开。如果我试图找到一个中间立场，我会在左侧和右侧得到 2 个间隙。显然，我不可能用导航栏完全覆盖整个上部区域。

示例链接：

http://jsfiddle.net/Vk5Md/3/

而且我必须用边距修改我的身体，否则顶部也会有间隙，还有其他方法可以解决吗？

body {
    background-image:url('../images/subtle_grunge.png');
    background-repeat:repeat;
    margin-left: 4px;
    margin-right: 0px;
    margin-top: 0px;
}

基本上我想让我的导航栏看起来几乎像 stackoverflow 上的导航栏，地址栏、浏览器左侧和右侧的滚动条之间没有间隙。

4

6 回答 6

0

用这个..

CSS

body {
    background-image:url('../images/subtle_grunge.png');
background-repeat:repeat;
 margin:0;  
}

在这里更新了你的小提琴：DEMO

于 2013-05-16T06:43:24.943 回答
0

它是 body 元素的默认边距，您可以使用

body {margin: 0;}

考虑在您的文件中添加“CSS 重置”。例如

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

避免使用这个：

* {margin: 0; padding: 0}

因为它对某些元素（例如表单元素）有负面影响。

于 2013-05-16T06:39:33.627 回答
0

您看到的空间是用于body和在某些浏览器中，用于html. 只需将marginandpadding设置0为这两个元素：

html, body {
    margin: 0;
    padding: 0;
}

RAW实现演示：

Working FIDDLE Demo为您的演示。

于 2013-05-16T06:39:51.980 回答
0

这是您想要实现的目标吗？用导航栏完全覆盖整个上部区域？

在此处输入图像描述 

<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <!-- Navbar==================================================- ->
<div id="nav">
     <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Crawler</a></li>
          <li><a href="#">Visual Analytics</a>
          </li> 
     </ul> 
</div>
</div> 
    </form>
</body>



body {
    background-image:url('../images/subtle_grunge.png');
    background-repeat:repeat;
}
#wrapper {
    margin: 0 auto;
    width: 1000px;
    height:100%;
    text-align: left;
}
#nav {
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    height:auto;
    width:100%;
    background-color:#b11d1d;
    text-align: center;
    opacity:0.5;
}
#nav ul {
    list-style-type: none;
    padding: 0;
}
#nav li {
    display:inline;
}
#nav li a {
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color:#b11d1d;
    float:left;
}
#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}


注意：如果要增加导航的宽度，只需padding-left:#px; padding-right:#px;添加#nav li a

于 2013-05-16T06:54:04.853 回答
0 
* {
    margin: 0px;
    padding: 0px;
}

在 css 文件或代码的开头试试这个

于 2013-05-16T06:36:39.953 回答
0

在margin: 0;你的身体里，你想真正为你的导航栏定义一个 CSS 类，像这样：

#navbar {
    top: 0;
    margin: 0;
    clear: both;
    background: #CCC url(img/clouds_header1.png) no-repeat 0 0;
}

然后您的 HTML 将如下所示：

<body>
    <div id="navbar">
        Put Nav Bar content here...
    </div>
</body>

现场示例

于 2013-05-16T06:54:21.777 回答