HTML Verschachtelte Divs in verschachtelter Div werden nicht angezeigt, wenn CSS-Klasse verwendet wird

Der folgende Code enthält eine Div, die vier kleinere Divs in einer Zeile enthält. Jede der vier Divs enthält auch eine kleinere Div, aber diese Div wird nicht angezeigt. Ich habe verschiedene Kombinationen aus Anzeige und Position ausprobiert, um zu sehen, ob das Div angezeigt wird. In classGoalSelected scheint etwas nicht in Ordnung zu sein.HTML Verschachtelte Divs in verschachtelter Div werden nicht angezeigt, wenn CSS-Klasse verwendet wird

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

diese Codezeile verwenden

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

anstelle dieser Code mit der Klasse wird der Div erscheinen lassen.

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

Quelle

2016-05-23 John Bessire

Das ist, weil Sie eine zusätzliche '}' in Ihrem CSS haben. passiert den Besten von uns

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

Diese Arbeit sollte !!

Quelle

2016-05-23 03:55:27

Ich lief den Code durch einige HTML-Validatoren und sie fanden nicht die zusätzliche '}' –

Haha. Manchmal hilft es, dass jemand anders Ihren Code durchgeht. : D –

HTML Verschachtelte Divs in verschachtelter Div werden nicht angezeigt, wenn CSS-Klasse verwendet wird

Antwort

Verwandte Themen