Question

我想创建一个水平菜单，它从页面顶部开始，这意味着我不希望它上面有任何边距，但我不知道该怎么做。我尝试使用.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; }，但它不起作用......我的CSS代码就在这里：

import React from 'react';
import { render } from 'react-dom';
// import other components here

    render((
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/Contact" component={Contact} />
        <Route path="*" component={Error} />
      </Router>
    ), document.getElementById('app'));

Answer 1

在 .menu1 ul

中添加 margin：0;

一切都会好的。

请参阅以下代码

感谢

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

消除水平菜单的顶部空间

4 个答案: