Question

我正在尝试在底部边框线和我的<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;
}

我尝试了几种不同的东西，但迄今为止没有任何效果。边界间距不是我想要的。我尝试了填充底部，但也没有用。谁能告诉我如何实现这一目标？我希望“li”项目与其border-bottom之间有一个空格。

Answer 1

添加填充底部或边距底部似乎正在起作用。

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

这是FIDDLE

或

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

这是FIDDLE

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

.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;
}

FIDDLE

Answer 2

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

如何在边框线和菜单项之间添加空格

2 个答案: