CSS - le parent UL est plus petit que l'enfant

Question

Hé les gars j'utilise simple ul li pour styliser 3 artiles courts, les choses semblent bonnes mais le problème est que j'ai remarqué que le parent UL n'est pas en taille réelle et li est plus grand alors (que n'est pas bon: P)

Quelqu'un peut-il essayer de m'aider à le réparer? Et faire cela avec la même largeur, la hauteur que ses enfants?

il ressemble:

HTML:

<div id="article-container"> 

<ul> 
     <li><a href="#"><img src="images/foto.jpg" width="109" height="109" alt="Popis"></a> 
      <h2><a href="#">Název článku</a></h2> 
      <p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br> 
       Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p> 
      <p class="more"><a href="#" class="links">Přečíst</a><br> 
       <a href="#">4 reakce</a></p> 
      <hr> 
     </li> 

    <li><a href="#"><img src="images/foto.jpg" alt="Popis"></a> 
      <h2><a href="#">Název článku</a></h2> 
      <p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br> 
      Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p> 
      <p class="more"><a href="#" class="links">Přečíst</a><br> 
      <a href="#">4 reakce</a></p> 
      <hr> 
     </li> 

     <li><a href="#"><img src="images/foto.jpg" alt="Popis"></a> 
      <h2><a href="#">Název článku</a></h2> 
      <p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br> 
      Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p> 
      <p class="more"><a href="#" class="links">Přečíst</a><br> 
      <a href="#">4 reakce</a></p> 
      <hr> 
     </li> 
</ul> 

CSS:

#article-container{ 
    width: 980px; 
    margin: 0 auto; 
    color:#4d4d4d; 
    font-size:90%; 
    height: 144px; 
} 

#article-container br, hr { 
    display:none; 
} 
#article-container ul { 
    width:960px; 
    height: 144px 
    overflow:hidden; 
    margin:0; 
    padding:15px 0; 
} 
#article-container li { 
    width:310px; 
    float:left; 
    list-style:none; 
    padding:0; 
    margin:0px 0px 0px 8px; 
} 
#article-container img { 
    float:left; 
    margin: 0 10px 0 0 
} 
#article-container a img { 
    border:2px solid #999e8a 
} 
#article-container a:hover img { 
    border-color:#000 
} 
#article-container h2 { 
    margin: 0; 
    padding: 0 0 10px 0; 
    font-size:110%; 
    font-weight:normal; 
} 
#article-container h2 a { 
    color:#4d4d4d 
} 
#article-container h2 a:hover { 
    color:#840000 
} 
#article-container p { 
    padding: 0 10px 0 0; 
    margin:0 
} 
#article-container p span { 
    display:block; 
    padding: 0 0 5px 0 
} 
#article-container p.more { 
    padding: 0px 0 0 0; 
    overflow:hidden 
} 


#article-container p.more a { 
    color:#2e79bc; 
    line-height: 27px; 
} 
#article-container p.more a:hover { 
    color:#840000 
} 
#article-container p.more a.links { 
    float:right; 
    padding: 5px 10px; 
    background:#2e79bc; 
    color:#fff; 
    margin-right:15px; 
    text-decoration:none; 
    border-radius:3px; 
    line-height: 18px; 
} 
#article-container p.more a.links:hover { 
    background:#000 
} 

P.S. Merci d'avoir lu ce post

Answer 1

Ne pas faire flotter les éléments de la liste mais les rendre display: inline-block; et la hauteur sera fixée.

Answer 2

On dirait qu'il est surtout probable que le résultat des peut-être, au lieu li les balises étant float: left

Essayez de les rendre display: inline-block, qui ne fera pas le conteneur parent effondrement de la façon dont float volonté.

Answer 3

Vous pouvez résoudre ce problème en utilisant un correctif commun dans css appelé clearfix. Créez une classe comme celle-ci et placez-la sur le parent contenant les éléments flottants.

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

Reference

Answer 4

inline-block travaillerait

mais si tu veux les garder comme float:left ajouter cet élément de liste après l'élément de liste <li style="clear:both"></li>

ou être une utilisation précise la classe clearfix sur le <ul> et ajoutez ceci dans css (si vous l'employez pas besoin d'ajouter l'élément de liste montré au-dessus).

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; 
} 
* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */