Html 菜单向右移 - 想要向左

如何解决Html 菜单向右移 - 想要向左

这是一个简单的 html 菜单，但它向右移动了一点，我无法弄清楚。我希望它与“欢迎”标题内联。我正在使用 Firefox，但不确定是否只是 Firefox 的问题？我读到 ul 的 padding 和 margins 应该是 0，它们在这里，似乎没什么区别。

code,pre {
  overflow-x: auto;
}

img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

iframe {
  display: block;
  width: 100%;
}

li {
  display: inline;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 30px;
  background-color: #600;
  font-family: inherit;
  font-size: 0.9em;
}

.menu li {
  margin: 0;
  padding: 0;
  float: left;
  height: 30px;
  line-height: 30px;
}

.menu li a {
  font-size: 1.3em;
  display: block;
  padding: 0 20px;
  color: blue;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #F8BC27;
  text-decoration: none;
}

<div class=container>

  <h1><a href=/index.html class=logo>Welcome</a></h1>

  <ul class="menu">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/indexes/posts/docs-1.html">Posts</a></li>
    <li><a href="/indexes/posts/tags.html">Tags</a></li>
    <li><a href="/indexes/newsletters/docs-1.html">News</a></li>
    <li><a href="/search.html">Search</a></li>
  </ul>
</div>

解决方法

重置

* { padding:0; margin:0; }

并且有

ul.menu {
  ...
  padding: 20px;

和

.menu li a {
   ...
   padding: 0 20px 0 0; 
   ...

并向 UL 添加填充，即 .menu 而不是子元素

* { padding:0; margin:0; }

code,pre {
  overflow-x: auto;
}

img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

iframe {
  display: block;
  width: 100%;
}

li {
  display: inline;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 20px;
  height: 30px;
  background-color: #600;
  font-family: inherit;
  font-size: 0.9em;
}

.menu li {
  margin: 0;
  padding: 0;
  float: left;
  height: 30px;
  line-height: 30px;
}

.menu li a {
  font-size: 1.3em;
  display: block;
  padding: 0 20px 0 0; 
  color: blue;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #F8BC27;
  text-decoration: none;
}

<div class=container>
  <h1><a href=/index.html class=logo>Welcome</a></h1>
  <ul class="menu">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/indexes/posts/docs-1.html">Posts</a></li>
    <li><a href="/indexes/posts/tags.html">Tags</a></li>
    <li><a href="/indexes/newsletters/docs-1.html">News</a></li>
    <li><a href="/search.html">Search</a></li>
  </ul>
</div>

,

您遇到的问题是您定位菜单 ul 元素的方式。只需使用 .menu 而不是 .menu ul

code,pre {
  overflow-x: auto;
}

img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

iframe {
  display: block;
  width: 100%;
}

li {
  display: inline;
}

.menu  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 30px;
  background-color: #600;
  font-family: inherit;
  font-size: 0.9em;
}

.menu li {
  margin: 0;
  padding: 0;
  float: left;
  height: 30px;
  line-height: 30px;
}

.menu li a {
  font-size: 1.3em;
  display: block;
  padding: 0 20px;
  color: blue;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #F8BC27;
  text-decoration: none;
}

<div class=container>

  <h1><a href=/index.html class=logo>Welcome</a></h1>

  <ul class="menu">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/indexes/posts/docs-1.html">Posts</a></li>
    <li><a href="/indexes/posts/tags.html">Tags</a></li>
    <li><a href="/indexes/newsletters/docs-1.html">News</a></li>
    <li><a href="/search.html">Search</a></li>
  </ul>
</div>