Html 复选框的CSS样式主题化

我正试图在目标时间部分实现上面的图片

我所拥有的一切如下。。。但当我调整浏览器大小时，位置不正确，我不知道如何在复选框上方添加高峰时间图片。有人能帮忙吗

<div class="row-fluid">
    <label style="float:left; margin-right:14px;">Target Time</label>
    <div style="float:left; display:block;">
        <label class="checkbox inline">
            <input type="checkbox" value="7am-11:59am" name="target_time[]" />7am-11:59am</label>
        <label class="checkbox inline">
            <input type="checkbox" value="12pm-5:59pm" name="target_time[]" />12pm-5:59pm</label>
        <label class="checkbox inline">
            <input type="checkbox" value="6pm-9:59pm" name="target_time[]" />6pm-9:59pm</label>
    </div>
    <div style="position:relative; display:block;">
        <div style="float: left; border-right: 1px solid #aaa; height: 5em;"></div>
        <label class="checkbox inline">
            <input type="checkbox" value="10:00pm-2:00am" name="target_time[]" />10:00pm-2:00am</label>
        <label class="checkbox inline">
            <input type="checkbox" value="2:01am-6:59am" name="target_time[]" />2:01am-6:59am</label>
    </div>
</div>

目标时间
上午7:00-11:59
下午12:00-5:59
下午6:00-9:59
晚上10:00-凌晨2:00
凌晨2:01-6:59

---

JSFIDLE DEMO:

您想要这种结构吗。如果是，请选中以下结构复选框

    <div  style="float:left;">
        <img src='http://forums.animesuki.com/images/as.global/icons/icon7.gif'><br>
        <label class="checkbox inline">
            <input type="checkbox" value="7am-11:59am" name="target_time[]"/>7am-11:59am
        </label>
    </div>

上午7:00-11:59

这就是你所期望的-->

---

调整大小时有什么不对？你期待什么？当我把浏览器变小时，复选框和行都不合适了。。。底部的两个复选框应与顶部的复选框对齐，当我的窗口重新调整为较小尺寸时，该行将消失或转到底部…您有指向该页面的链接吗？或者您可以创建一个JSFIDLE来进行说明吗？看起来您正在使用Twitter引导。为什么是浮动潜水艇？你是从什么地方复制代码的吗？这是我购买的一个名为“Gebo”的主题，我正试图修改它，使它看起来像我想要的那样。我将尝试创建一个JSFIDLE。这几乎是我想要的，但我不是说我需要单击复选框才能显示图像。我需要它一直在那里。非常喜欢我在第一篇博文上面的图片，谢谢你更新的答案。这真的很有帮助……；）