Question

我有一个<div>，其ID为#left，其中包含ID为<div>的另一个#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;
}

通过using jsFiddle，我发现它是<a>标记，而且它的CSS属性正在破坏我的<li>标记的高度。但是，如果我更改<a>，我会失去我想要的其他效果，即可以点击<li>中的任意位置并激活链接。

我可以让<li>垂直展开，还可以<a>标记填充整个<li>吗？我不明白为什么<a>会影响<li>现在正在做的事情。

Answer 1

我的理解是，您希望让您的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%;


}

Answer 2

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

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

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

请参阅此fiddle

如果您想要pointer光标，当您将li悬停在anchor时，只需将href标记（甚至href='#'）指定给锚点

请参阅此fiddle了解可点击的锚点

为什么li标签内的标签的CSS导致li不垂直扩展以包含其内容？

2 个答案: