Question

以下代码的Div包含一行中的四个较小的Div。四个Div中的每一个也包含一个较小的Div，但是这个Div没有显示。我尝试了各种显示和位置组合，看看div是否会显示出来。 classGoalSelected中似乎有问题。

<html>

<head>

    <style type="text/css">

        #goalSelectionContainer {

            width: 70%;
            background: #eee;
            margin: 10px auto;
            position: relative;
            text-align:center;
        }                

        .classGoalSelection {
            background: grey;
            height: 100px;
            width: 100px;
            position: relative;
            display:inline-block;
            margin: 10px;
            }                
        }

        .classGoalSelected {
            background-color:green; 
            width:25px; 
            height:25px;
            position: relative;
            display:inline-block

        }

    </style>

</head>

<body>

    <div id = "goalSelectionContainer" >
        <div id = "goalSelectHome" class = "classGoalSelection">Home

            <div id = "goalSelectedHome" class = "classGoalSelected">   
            </div>


        </div>

        <div id = "goalSelectRetire" class = "classGoalSelection">Retirement

            <div id = "goalSelectedRetire" class = "classGoalSelected">             
            </div>

        </div>

        <div id = "goalSelectCollege" class = "classGoalSelection">College

            <div id = "goalSelectedCollege" class = "classGoalSelected"> 
            </div>
        </div>   

        <div id = "goalSelectOther" class = "classGoalSelection">Other

            <div id = "goalSelectedOther" class = "classGoalSelected">
            </div>

        </div>          

    </div>



</body>

</html>

使用这行代码

<div style="background-color:green; width:50%; height:50px;display:inline-block;"> </div>

而不是使用该类的代码将导致Div出现。

<div id = "goalSelectedHome" class = "classGoalSelected"></div>

Answer 1

因为你有额外的＆＃39;}＆＃39;在你的CSS。发生在我们最好的人身上

 .classGoalSelection {
            background: grey;
            height: 100px;
            width: 100px;
            position: relative;
            display:inline-block;
            margin: 10px;              
        }

这应该工作!!

使用CSS类时，嵌套Div中的HTML嵌套Div不显示

1 个答案: