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