删除水平菜单的顶部 space

Question

我想创建一个水平菜单，它从页面顶部开始，这意味着我不想在它上面有任何边距，但我不知道该怎么做。我尝试使用 top: 0; margin:auto;，但它不起作用...我的 CSS 代码就在这里：

.menu1 
{
     position: absolute;
     top: 0;
     margin:auto;
     left: 0;
     right: 0;
     width: 100%;
 }
.menu1 ul 
{
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     height: 30px;
     background-color: purple;
 }

.menu1 li 
{
     float:left;
     margin-right: 10px;
 }

.menu1 li a 
{
     display: block;
     color: white;
     text-align: center;
     padding: 8px 10px;
     text-decoration: none;

}

.menu1 li a:hover 
{
     text-decoration: underline;
}

Answer 1

在.menu1 ul

中添加margin:0;

一切都会好起来的。

见下方代码

谢谢

.menu1 
{
     position: absolute;
     top: 0;
     margin:auto;
     left: 0;
     right: 0;
     width: 100%;
 }
.menu1 ul 
{
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     height: 30px;
     background-color: purple;
  margin:0;
 }

.menu1 li 
{
     float:left;
     margin-right: 10px;
 }

.menu1 li a 
{
     display: block;
     color: white;
     text-align: center;
     padding: 8px 10px;
     text-decoration: none;

}

.menu1 li a:hover 
{
     text-decoration: underline;
}

<div class="menu1">
  <ul>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    </ul>
  </div>

Answer 2

body, html, .menu { margin:0 auto; }

Answer 3

添加风格可能对你有帮助

*{margin:0px 0px; padding:0px 0px;}

Answer 4

你有两个选择。

1: *{margin:0px 0px; padding:0px 0px;}

2：使用重置CSS

删除水平菜单的顶部 space

eliminate top space of a horizontal menu

css

menu

margin