Question

现在在论坛上工作，我给我的一个href和他的孩子的维度都不起作用。当我在浏览器中在控制台中调试它们时，他们没有得到我在CSS中给出它们的尺寸宽度和高度它们是0px 0px所以我的类可能有一个名为＆＃34;论坛的问题-link＆＃34;因为他的父母＆＃34;孩子论坛＆＃34;工作得很好。谢谢

HTML CODE

<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;
}

Answer 1

默认情况下，

a代码是内联的，您无法在内联元素上设置宽度或高度。

要强制它成为块元素，请使用以下样式之一：

.forum-link {
  display: block;
}

......或

.forum-link {
  display: inline-block;
}

Answer 2

您需要为锚标记指定一个位置，以便识别width和height。您可以通过浮动链接display:block或display:inline-block来满足您的需求。

a.forum-link {
    width:309px;
    height:106px;
    float:left;
}

CSS类不在href中工作

2 个答案: