2

我已经在这个导航栏上工作了一段时间，我修复了一些（之前真的很糟糕）但仍然有空白（这里有其他主题与此相关但不是这个问题或答案没有'不工作）。这是我忘记做的事情吗？我是否设置了边距而我只是看不到它？

它的样子：http ://www.orikina.com/hm/

CSS：

    .nav {
    width: 100%;
    height: 35px;
    background-color:#2D2D2D;
    border-bottom: #000000;
    border-width: 1px;
    float: left;
}
.nav, ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
.nav, ul, li{
    display:inline;
}
.nav, ul, li, a{
    text-decoration: none;
    font-size: 17px;
    color: #BBBBBB;
    display: inline-block;
}
.nav, ul, li, a:hover{
    color:#FFFFFF;
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/m.styles.css">
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
        <!-- End of NAVBAR -->
    </body>
</html>

提前致谢！-蒂姆

4

4 回答 4

0

到目前为止所有的答案都是正确的，我只想补充一点，我总是添加到我的基本 CSS 文件中或期望从重置的 CSS 文件中得到的第一件事就是这个

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

如果您打算长期成为一名前端 Web 开发人员，那么学习您选择的浏览器的内置开发人员工具将是您帮自己一个忙。我的建议是使用 Chrome 或 Firefox 进行主要开发，然后根据需要在 IE 中进行测试，因为它们的开发工具比 IE 中的更先进。如果您使用 Firefox，我强烈推荐使用 firebug 扩展。如果您使用的是 Chrome，Google 已经开设了一个了解 Chrome 开发者工具的课程：http ://discover-devtools.codeschool.com/ ，这将是一个很好的起点。

于 2013-07-05T02:34:38.413 回答
0

尝试设置body { padding: 0; }以删除它的填充。

于 2013-07-05T02:23:47.493 回答
0

这是由于用户代理为正文设置的默认边距（在 Chrome 8px 中）。所以你可以设置margin-top:0px;在身体上。

body {
    margin-top: 0px; //if you just want to remove the top margin.
}

快照：

在此处输入图像描述

您可以更喜欢始终进行CSS 重置以确保不呈现默认样式。

于 2013-07-05T02:24:52.977 回答
0

如果您尝试删除导航栏周围的基本空白，请将边距设置为0px; 您可以通过执行以下操作来设置：

body {
  margin: 0px;
}

这是一个简单的例子：http: //jsfiddle.net/uMExn/

如果您尝试仅删除上边距或其他边距，那么您可能会使用：

body {
  margin-top: 0px; //remove just the top margin
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

或者：

body {
  margin: 0px 0px 0px 0px;
}

上面的填充项的顺序是：上、右、下、左。

于 2013-07-05T02:27:04.650 回答