0

我的导航菜单样式有一个小问题。

所以这是我的 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 编辑器中，您会发现我的导航菜单中的项目符号之间的距离很大。我只是不明白为什么。谁能告诉我我做错了什么以及如何使这个距离变小？

谢谢。

4

3 回答 3

1

您已将“li”元素的左侧填充设置为 100 像素。如果您想要缩进列表，请改用边距。

于 2013-08-03T16:22:22.647 回答
1

li元素是用夸张的左填充声明的。具有较小的值并且问题已解决：

.main-ul li {
    padding-left: 10px;
}

您可能还想更改宽度以防止内容向右渗出，例如：

.main-ul li {
    width:150px;
}

这是一个现场演示。

于 2013-08-03T16:23:17.457 回答
0

这是由padding-left100px in

.main-ul li {
    float:left;
    position:relative;
    width:10%;
    text-align:center;
    padding-left:100px;
}

将其更改为较小的数字以减小间距。

于 2013-08-03T16:23:59.617 回答