我的导航菜单样式有一个小问题。
所以这是我的HTML文件:
<ul class="main-ul">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Blog</span></a></li>
<li><a href="#"><span>Gallery</span></a></li>
<li><a href="#"><span>Contcts</span></a></li>
</ul>
这是我的CSS文件:
.main-ul li {
float: left;
position: relative;
width: 10%;
text-align: center;
padding-left: 100px;
}
.main-ul li a {
display: block;
padding-bottom: 5px;
padding-right: 10px;
padding-top: 1px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
background-color: rgba(164, 164, 164, 0.2);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.main-ul li a span {
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: rgba(120, 120, 120, 0.9);
text-transform: uppercase;
font-family: 'Kotta One', serif;
}
因此,如果您将其插入CSS Desk或任何其他在线CSS编辑器,您可以看到导航菜单中的项目符号之间的距离很大。我只是无法理解为什么。任何人都可以告诉我,我做错了什么,如何让这个距离变小?
感谢。
答案 0 :(得分:1)
您已将'li'元素的左边距设置为100px。如果您想要缩进列表,请使用保证金。
答案 1 :(得分:1)
使用exagerrated left padding声明li
个元素。有一个较小的值,问题得到解决:
.main-ul li {
padding-left: 10px;
}
您可能还想更改宽度以防止内容向右流血,例如:
.main-ul li {
width:150px;
}
这是live demo。
答案 2 :(得分:0)
这是由padding-left
的100px
.main-ul li {
float:left;
position:relative;
width:10%;
text-align:center;
padding-left:100px;
}
将其更改为较小的数字以减小间距。