0

我正在尝试在底部边界线和我的<li>项目之间添加空间，但没有运气。

我的代码：

<div class="menuwrap">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Query</a>
            </li>
            <li><a href="#">Reports</a>
            </li>
        </ul>
    </div>
</div>

CSS 样式：

.menu {
    color: #000;
    background: #FFF;
}
.menu ul {
    list-style: none;
    display: inline;
    float: left;
    padding-left: 40px;
    margin-top: 90px;
}
.menu li {
    float:left;
    margin-left:10px;
}
.menu li a:hover {
    padding: 0 10px 0 10px;
    font-size: xx-large;
    border-bottom: 1px solid white;
    border-spacing: 20px;
}
.menu li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: large;
}
.menuwrap {
    overflow:hidden;
}

我尝试了几种不同的方法，但到目前为止没有任何效果。边框间距没有做我想要的。我尝试了 padding-bottom ，但也没有用。有人可以告诉我如何实现吗？我想要在“li”项目和它的边框底部之间有一个空格。

4

2 回答 2

1

添加 padding-bottom 或 margin-bottom 似乎有效。

li:hover{
   padding-bottom: 10px;
}

这是一个小提琴

或者

li:hover{
   margin-bottom: 10px;
}

这是一个小提琴

更新：在阅读了您的评论并查看了您提供的小提琴之后，我创建了一个可以执行您想做的事情的小提琴。它与您提供的代码不同，但更易于阅读，您可以根据需要进行修改

.menu{
  list-style-type: none;
}

.menu li{
  display: inline-block;
  *display: inline;
  zoom: 1;
  margin: 10px;
}

.menu li a{
  text-decoration: none;
  color: #000;
  border-bottom: 2px solid #000;
  padding-bottom: 30px;
}

.menu li a:hover{
  font-size: 2em;
  font-weight: bold;
}

小提琴

于 2013-08-12T14:18:26.957 回答
0

我猜你没有给出你的风格。padding-bottom作品。请检查http://jsfiddle.net/VZCrq/8/

于 2013-08-12T14:26:31.797 回答