0

我有一个<div>带有 ID 的#left，其中包含另一个<div>带有 ID 的#container。里面#container是一个<ul>。

我认为默认设置是<li>垂直扩展以包含其中的任何和所有文本。但事实并非如此。这是CSS：

#left {
    width:200px;
}
#container {
    margin: 0 6px;
    overflow:hidden;
}

#container li {
    background:greenyellow;
    position: relative;
    border: #BF0000 thin solid;
    margin: 0 0 12px 0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    clear:both;
}
#container li:hover {
    background: #ffffff;
}
#container a {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

通过使用 jsFiddle，我发现它是<a>标签，而它的一些 CSS 属性正在破坏我<li>的标签的高度。但是，如果我更改<a>，我会失去我想要的其他效果，即能够单击 中的任何位置<li>并让它激活链接。

我可以让标签<li>垂直扩展并且<a>标签填充整个<li>吗？我不明白为什么<a>应该影响<li>它现在的做法。

4

2 回答 2

3

我知道你想让你的 li 正确地包装你的标签，而标签可以根据内容增加它的高度。如果是这种情况，请访问http://jsfiddle.net/jBvQ8/16/以获得解决方案。

如果您需要一些修改或其他用例来处理，我将更新我的那个 jsfiddle。

#left {
    width:200px;
}
#container {
    margin: 0 6px;
}

#container li {
    background:greenyellow;
    position: relative;
    border: #BF0000 thin solid;
    margin: 0 0 12px 0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    clear:both;
}
#container li:hover {
    background: #ffffff;
}
#container a {
    display:block;    
    width: 100%;


}
于 2013-09-08T08:39:36.277 回答
-1

我不确定你想要什么，但也许你希望整个<a>应用的 CSS 都在 li 内。

只需从标签position:absolute的css中删除即anchor

#container a {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

看到这个小提琴

如果你想要一个pointer光标，当你将鼠标悬停li时anchor，只需将 href 标签（偶数href='#'）指定给锚点

看到这个小提琴可点击的锚

于 2013-09-08T08:19:49.400 回答