html - Html 菜单向右移动 - 向左移动
问题描述
这是一个简单的 html 菜单,但它向右移动了一点,我无法弄清楚。我希望它与“欢迎”标题内联。我正在使用 Firefox,但我不确定这是否只是 Firefox 的问题?我读到 ul 的填充和边距应该为 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>
推荐阅读
- alexa - 如果我使用自己的端点,如何将 ask-sdk 与节点 js 一起使用?
- r - 一张图表中的多个水平条形图
- python - 是否可以让客户端与服务器端的 recaptcha 交互?
- apache - 如何以类似 MVC 的方法将 URL 重写为 index.php
- amazon-web-services - 无法创建 ScalingPolicy - 未注册可扩展目标
- here-api - HereMaps语音指导中TBT信息的触发点
- sql - 仅借用指定作者和编辑的所有书籍的借款人
- vue.js - VueJS - 从数据中自动创建一个 AZ 字母列表
- php - 显示总计为 0
- javascript - jQuery 克隆和递增输入,textarea,具有名称、id 和 for