CSS: Pourquoi les éléments descendants sont-ils supprimés du bloc parent?

Dans mon code ci-dessous, la bordure inférieure de la div "question-contenu" n'apparaît pas en bas; il coupe réellement à travers les éléments "li". L'analyse dans Firebug montre que les éléments descendants li class = "tag" ne sont plus inclus dans le bloc parent "question-content".CSS: Pourquoi les éléments descendants sont-ils supprimés du bloc parent?

Comment résoudre ce problème? Merci.

<html> 
<head> 
    <style type="text/css"> 
    .question-block { 
     margin: 10px 10px 0; 
     padding-bottom: 20px; 
    } 
    .question-block .question-content { 
     margin: 0 0 10px 55px; 
     padding: 0 0 20px 0; 
     width: 545px; 
     border-bottom: 1px solid gray; 
    } 
    .question-content h1 { 
     font-size: 20px; 
     line-height: 22px; 
     margin: 0 0 10px 0px; 
    } 
    .question-content .question-details { 
     margin-left: 30px; 
     font-size: 14px; 
    } 
    .question-content .links { 
     margin-left: 30px; 
     padding: 0px; 
     list-style-type: none; 
    } 
    .tag { 
float: left; 
margin: 5px 4px 0; 
font-size: 14px; 
    } 
    .tag a { 
    display: block; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
    border: 1px; 
border-radius: 4px; 
height: 20px; 
color: #000; 
background: #C5C5C5; 
    padding: 3px 0 0 0; 
width: 81px; 
text-align: center; 
    } 
    </style> 
</head> 

<body> 
    <div class="question-block">  
     <div class="question-content"> 
      <h1> Question </h1> 
      <div class="question-details"> Question details </div> 
      <ul class="links"> 
       <li class="tag"><a href="#">tag 1</a></li> 
       <li class="tag"><a href="#">tag 2</a></li> 
       <li class="tag"><a href="#">tag 3</a></li> 
      </ul> 
     </div> 
    </div> 
</body>

Source

2010-09-13 JMan

Je résous généralement ce problème en déclarant élément enfant (ul.links dans votre cas) avec display:inline-block attribut. Cela empêchera l'enfant de traverser les frontières du conteneur parent.

http://jsfiddle.net/9sQXk/1/

Source

2010-09-13 22:05:39

Essayez d'ajouter overflow: auto à .question contenu

Source

2010-09-13 22:05:08

Ce qui se passe parce que vos <li> éléments de liste flottaient. Essayez d'ajouter un élément de niveau bloc avec un style clear:both après la fermeture .

Alors:

<html> 
<head> 
    <style type="text/css"> 
    .question-block { 
     margin: 10px 10px 0; 
     padding-bottom: 20px; 
    } 
    .question-block .question-content { 
     margin: 0 0 10px 55px; 
     padding: 0 0 20px 0; 
     width: 545px; 
     border-bottom: 1px solid gray; 
    } 
    .question-content h1 { 
     font-size: 20px; 
     line-height: 22px; 
     margin: 0 0 10px 0px; 
    } 
    .question-content .question-details { 
     margin-left: 30px; 
     font-size: 14px; 
    } 
    .question-content .links { 
     margin-left: 30px; 
     padding: 0px; 
     list-style-type: none; 
    } 
    .tag { 
float: left; 
margin: 5px 4px 0; 
font-size: 14px; 
    } 
    .tag a { 
    display: block; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
    border: 1px; 
border-radius: 4px; 
height: 20px; 
color: #000; 
background: #C5C5C5; 
    padding: 3px 0 0 0; 
width: 81px; 
text-align: center; 
    } 
.clearfloat { 
clear: both; 
} 
    </style> 
</head> 

<body> 
    <div class="question-block">  
     <div class="question-content"> 
      <h1> Question </h1> 
      <div class="question-details"> Question details </div> 
      <ul class="links"> 
       <li class="tag"><a href="#">tag 1</a></li> 
       <li class="tag"><a href="#">tag 2</a></li> 
       <li class="tag"><a href="#">tag 3</a></li> 
      </ul> 
      <div class="clearfloat"></div> 
     </div> 
    </div> 
</body>

Source

2010-09-13 22:07:44 Gus

Vous avez spécifié que quelque chose avec la classe "tag" aura "float: left". Float supprime un élément de la disposition de flux régulier d'un document. En d'autres termes, les blocs contenant <ul> et <div> ne sont plus ajustés pour la hauteur des <li> qui se trouvent dans la liste.

Vous devez supprimer le flotteur si vous souhaitez que vos éléments de liste apparaissent à l'intérieur de leurs conteneurs, plutôt que de flotter à gauche du reste du document. Alternativement, vous pouvez faire flotter le tout, en mettant la propriété float sur le div contenant.

Source

2010-09-13 22:08:08 womp

CSS: Pourquoi les éléments descendants sont-ils supprimés du bloc parent?

Répondre

Questions connexes