html - 如何将所有 li 元素移动到左侧元素?
问题描述
我想将所有li元素移动到ul元素的左侧。看起来第一个li元素的左边距 >0 我不明白。
你知道我该如何解决这个问题吗?
最终目标是:footer 中的第一个li元素#music 和#email 元素的左边距相同,均为 70px(与左边框的距离相同)。
html,
body {
margin: 0;
text-align: center;
}
header {
overflow: hidden
}
nav {
overflow: hidden;
display: inline-block;
float: left;
margin-left: 70px;
}
nav li {
margin-right: 70px;
float: left;
}
nav ul {
list-style: none;
overflow: hidden
}
#email {
float: left;
padding: 25px 0px;
margin-left: 70px;
}
.wrapper {
border: 2px solid green;
}
#menu2 {
float: right;
margin-right: 70px;
border: 2px solid green;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
}
<div class="wrapper">
<header>
<nav id="menu">
<ul>
<li id="music">
<a href="#"><img src="gfx/music40.gif"></a>
</li>
<li id="film">
<a href="#"><img src="gfx/film40.gif"></a>
</li>
<li id="visual">
<a href="#"><img src="gfx/visual40.gif"></a>
</li>
<li id="media">
<a href="#"><img src="gfx/media40.gif"></a>
</li>
</ul>
</nav>
<div id="menu2">
<a id="logo" href="index.html"><img src="gfx/tobera40.gif" alt="logo" class="logo"></a>
</div>
</header>
<div id="main">
<img src="gfx/banner40.jpg">
</div>
<footer>
<div id="email">
<img src="email.jpg">
</div>
</footer>
</div>
解决方案
ul 上的填充将您的 li 项目推到右侧。由于#email 和 nav 都缩进 70px,唯一的区别是 ul 上的填充。尝试添加:
ul {
padding: 0;
}
推荐阅读
- javascript - 根据复制到剪贴板的用户输入生成链接
- php - 我想获取表 A 上所有引用表 B 的名称
- postgresql - 如何使用 PostgreSQL Upsert 使用 INSERT ON CONFLICT 语句在不同的 where 条件下更新多个列
- github - 一个 github 存储库可以是多个组织的一部分吗?
- sqlite - 如何在 SQLite 中执行 sec_to_time?
- powershell - Atom 终端:Windows PowerShell 未打开
- r - 无法用大光栅编织 RMarkdown
- jmeter - 在 POST 请求的索引 53 处获取路径中的非法字符
- excel - 宏用逗号分隔 .csv,尽管分隔符设置为分号
- c# - 使用嵌套的 For 循环对数字元组列表进行排序。.Net 4.0 C#