现在在一个论坛上工作,我为我的 href 和他的 child 提供的维度不起作用。当我在浏览器的控制台中调试它时,它们没有得到我在 CSS 中给它们的尺寸宽度和高度,它们是 0px 0px 所以我的名为“forum-link”的类可能有问题,因为他的 parent “child-论坛”完美运行。谢谢
HTML代码
<div id="content">
<div class="forum-group">
<h2 class="header-2">General Discussion</h2>
<ul class="child-forums">
<li class="child-forum">
<a class="forum-link" href="#">
<span class="forum-icon"></span>
<span class="forum-details">
<span class="forum-title"></span>
<span class="forum-desc"></span>
</span>
</a>
CSS 代码
.forum-group{
width:948px;
height:259px;
margin-left:auto;
margin-right:auto;
}
.header-2{
width:948px;
height:35px;
}
.child-forum{
width:310px;
height:106px;
float:left;
background-image: url(images/forum-child-background.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
margin-left:4px;
margin-bottom:4px;
}
.child-forum:hover {
opacity: 1.0;filter: alpha(opacity=100);
}
.child-forums{
width:948px;height:219px;
}
.forum-link{
width:309px;height:106px;
}
.forum-icon{
width:60px;height:60px;
}
.forum-details{
width:220px;height:43px;
}
.forum-title{
width:217px;height:18px;
}
.forum-desc{
width:217px;height:15px;
}
最佳答案
a
标签默认是内联的,内联元素不能设置宽度和高度。
要强制它成为 block 元素,请使用以下样式之一:
.forum-link {
display: block;
}
……或者
.forum-link {
display: inline-block;
}
关于html - CSS 类在 href 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29285788/