CSS - 文章但文章的短名单，但父母是小于孩子

Question

嘿古斯我造型的文章与它的名字，作者和其他一些东西，一般我的代码作品（其不是最好的但工作）像：

问题是，我只注意到我的href和p和H2 elemtns正在进入到另一种是在我眼里完全以不好，我怎么过尝试修复它给它一个A HREF显示块，但它根本不工作。

在这里任何人都可以帮助我将这些标签等同于孩子，而不会干扰其他元素吗？

HTML：

<div id="article-container"> 
    <ul> 
     <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> 

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

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; 
    display:inline-block; 
    list-style:none; 
    padding:0; 
    margin:0px 0px 0px 8px; 
} 
#article-container li a{ 
    display:block; 
} 
#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 
} 

演示：FIDDLE全WEBSITE DEMO

感谢您阅读这篇文章:)

Answer 1

你应该把

overflow: none; 

输入所有标签。

Answer 2

DEMO

这部分是一种具有左，右侧一个小的布局。

我的建议是将两部分都封装在div中并使用显示表格单元技术。

HTML：

<li> 
    <div class="article-item-left"><a href="#"><img src="http://www.funedit.com/andurit/new/images/foto.jpg" alt="Popis"></a></div> 
    <div class="article-item-right"> 
     <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> 
    </div> 
    <hr/> 
</li> 

CSS：

#article-container .article-item-left img{ 
    float: none; 
} 
.article-item-left, .article-item-right{ 
    display:table-cell; 
    vertical-align:top; 
} 

哦，并且锚0高度的Cuz它里面的图像浮动。