CSS - UL父母小于孩子

嘿家伙我使用简单的UL LI风格3短小的艺术品，事情看起来不错，但问题是，我注意到UL父母不是全尺寸，李大于那么它（什么不好：P）CSS - UL父母小于孩子

有人可以试图帮助我解决它吗？把它做成和孩子一样的宽度和高度？

它看起来像： enter image description here

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 
}

附：感谢您阅读这篇文章

来源

2014-04-27 user258459

不要浮动列表元素，但使他们display: inline-block;和高度将被固定。

来源

2014-04-27 08:30:42 KittMedia

它真实的作品，谢谢！ – user258459

谢谢，非常有帮助，如果超级简单的声音给你！ – godskook

看起来它是最有可能的li标签为float: left

尝试使他们display: inline-block相反，也许，这不会使父容器折叠方式float意志的结果。

来源

2014-04-27 08:36:05 gdpelican

啊，纠缠在reCaptcha中，而KittMedia打败了我。 :) – gdpelican

你可以使用一个常见的修复程序在css中解决这个问题，称为clearfix。制作一个像这样的类，并将其放在包含浮动元素的父级上。

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

来源

2014-04-27 08:43:59 JimmyRare

inline-block会工作

但如果u希望他们保持作为float:left列表项<li style="clear:both"></li>

或者对精确使用clearfix类后添加此列表元素<ul>并添加在CSS中（如果你使用这个不需要添加上面显示的列表元素）。

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

来源

2014-04-27 08:46:51

CSS - UL父母小于孩子

回答

相关问题