爲什麼我的人力資源不能單獨顯示？

Question

我有了這個HTML：

<article class="smallCaps"> 
    Cap Anson <span><em>my</em></span> outboard<br /> 
    Anyway...the reign in Spain falls mainly on the common folk<br/> 
    Note: This is a big secret. Don't tell <em>them</em> 
</article> 
<p>&nbsp;</p> 
<hr /> 

...但HR顯示器到右側的「不要告訴他們」，而不是一個單獨的行。

這裏的CSS：

<style type="text/css"> 
    .smallCaps { 
     font-variant: small-caps; 
     font-family: "Segoe UI", sans-serif; 
    } 
    .comicSansLarge { 
     font-size: 32px; 
     font-family: "Comic Sans", Consolas, serif; 
     color: hsl(30, 100%, 50%); 
    } 
</style> 

Answer 1

添加到您的CSS：

hr { 
    clear:both; 
    display: block; 
} 

Answer 2

一個可能的原因是，該文章是浮動的。像這樣：

http://codepen.io/seraphzz/pen/jyngu

的東西在你的CSS是造成它，但它是不可能的，說什麼這是沒有看到你的CSS。