HR标签没有显示正确的位置

Question

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

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>

解决方案：我上面的方法很繁琐＆amp;将使用不同屏幕尺寸的设计复杂化。

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

.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规则来修复它。