Question

我是网络和CSS设计的新手。我已经开始使用HTML5元素

了

我创建了一个简单的水平<nav>菜单，但由于某种原因，菜单上方会显示一些填充，使其停止显示在页面顶部。

HTML：

<nav class="site-nav">
    <ul>
        <li class=""> <a href=".html"></a>

        </li>
        <li class=""> <a class="" href=".html">Maps</a>

        </li>
        <li class=""> <a class="" href=".html">Lighting</a>

        </li>
        <li class=""> <a class="" href=".html">Services</a>

        </li>
        <li class=""> <a class="" href=".html">Contact Us</a> 
        </li>
    </ul>
</nav>

CSS：

article, aside, figcaption, figure, footer, header, main, nav, section {
    display: block;
}
body, dt, dd, h1, h2, h3, th, td {
    margin: 0 auto;
    padding:0;
    width: 70%;
}
ul, ol {
    list-style: none;
    padding: 0;
}

.site-nav {
    /*width: 100%;*/
    height: 48px;   
    background: #ac0c0c; /* Old browsers */ 
    background-image: -moz-linear-gradient(#bf0d0d, #860909); /* FF3.6+ */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf0d0d), color-stop(100%, #860909)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(#bf0d0d, #860909); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(#bf0d0d, #860909);/* Opera 11.10+ */
    background: -ms-linear-gradient(#bf0d0d, #860909); /* IE10+ */
    background-image: linear-gradient(#bf0d0d, #860909); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf0d0d', endColorstr='#860909',GradientType=0 ); /* IE6-8 */
    text-align: center;
}

.site-nav ul {
}

.site-nav li {
    display: inline;
    list-style-type: none;
}


.site-nav li a {
    text-align: center;
    padding-right: 40px;
    color: white;
}

.site-nav a:hover {
    background-color: #2d8ff0;
    color: white;
    text-shadow: none;
}

我还注意到每个菜单项中的文本没有出现在其元素的中心

Answer 1

试试这个：

 ul, ol { margin-top: 0px; list-style: none; }

Answer 2

ul 默认为margin-top：1em。 1em等于您当前的字体大小（默认为16px），因此如果您更改ul或其父元素的字体大小，则边距也会更改。

这消除了：

  ul{margin-top:0px}

您的文字没有居中，因为您有：

  site-nav li a {
    padding-right: 40px;
  }

您的 a 元素默认显示为内联，因此没有宽度居中。

将文本居中并保持其他所有内容相同的一种方法是在两边添加相同的填充：

  site-nav li a {
    padding-right: 20px;
    padding-left: 20px;
  }

但是，您似乎已向导航中添加了一个额外的项目，以帮助中心您的其他链接。用于显示目的的空标签通常不是一种好的做法。

如果是这种情况，最好的解决方案是删除空列表项＆amp;从html链接，删除padding-right，将显示更改为inline-block，然后为它们定义宽度：

<nav class="site-nav">
  <ul>
    <li class=""> <a class="" href=".html">Maps</a></li>
    <li class=""> <a class="" href=".html">Lighting</a></li>
    <li class=""> <a class="" href=".html">Services</a></li>
    <li class=""> <a class="" href=".html">Contact Us</a></li>
  </ul>
</nav>


.site-nav li a {
  padding-right: 0px;
  display:inline-block;
  width:15%;
}

Answer 3

您可以将ul的css更改为自动保证金0。

的http：// jsfiddle.net / LmcE7 / 7 /`“＆GT;的jsfiddle：

Answer 4

好的...由于<ul>标记，导航栏不会粘在页面顶部。默认情况下，<ul>标记会为页面添加一些边距。这里要注意的另一件事是不同的浏览器引入不同的边距。因此，为了确保导航栏粘在顶部，我们必须明确地将<ul>标签的边距归零。只需添加以下代码

即可

.site-nav ul {
  margin-top:0px;
}

因为我们在这个问题上也可以与其他元素一起出现上述问题，所以熟悉Normalize.css和css reset的概念很重要。请将附件链接改为：

What is the difference between Normalize.css and Reset CSS?

Answer 5

导航在它周围有一些边距，你应该把它设置为0.边距在元素之外，填充在里面（Google是一个＆＃39;框模型的图片＆＃39;用于澄清）。这是您的浏览器默认执行的操作，这些操作通常取决于浏览器。

我认为，一个好的做法是重置＆＃39; CSS样式表最顶部的所有内容的边距和填充：

  * { 
  margin:0;
  padding:0;
}

A *表示一切＆＃39;。通过这样做，可以防止这些与浏览器相关的问题被阻止。

显示padding-top </nav>的HTML / CSS <nav>元素

5 个答案: