CSS类在span标签中不起作用。

Question

我正在学习如何使用span，我在浏览器控制台进行了一些调试，但它们没有按照我在CSS类中定义的尺寸显示。我想知道我遗漏了什么，以便它们按照我给定的宽度和高度显示。谢谢。

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;
display: inline-block; 


}
.forum-icon{
    width:60px;height:60px;
}
.forum-details{
    width:220px;height:43px;
}
.forum-title{
    width:217px;height:18px;
}
.forum-desc{
    width:217px;height:15px;
}

- JeffLA

Answer 1

元素是内联元素，因此不受宽度和高度属性的影响。

尝试将它们设置为display:inline-block，这些属性将会生效。

- Paulie_D

Answer 2

你应该给你的span标签添加display:inline-block样式。

- Dieter

---

这个回答已经给出了，你没有为这个回答添加任何额外的价值。 - JoJo

写这篇东西花了我太长时间了...当我开始打字时还没有得到答案 ;) - Dieter