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

时间:2013-09-08 07:53:28

标签: html css

我有一个<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>现在正在做的事情。

2 个答案:

答案 0 :(得分: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%;


}

答案 1 :(得分:-1)

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

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

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

请参阅此fiddle

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

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