HR标签未正确显示

Question

我正在尝试hr在以下代码中的每4格之后添加一个标记，由于某种原因，它在小提琴上无法正确显示。

http://jsfiddle.net/UHqWF/14/

更新：http : //jsfiddle.net/UHqWF/16/

<hr>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
   <hr>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
   <hr>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>
<div class="imageitem"><div>Image Item</div></div>

解决方案：我的上述方法很繁琐，并且会使具有不同屏幕尺寸的设计复杂化。

我认为最好添加border-top:1px solid red;到imageitemdiv

.imageitem {
        -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
             box-sizing:border-box;
        float:left;
        padding:10px;
        width:100%;
        border-top:1px solid red;
         border-bottom:0px solid red;
    }

Answer 1

这是因为您浮动了元素。添加hr {clear: both;}CSS规则对其进行修复。