html - 复选框的 CSS 样式主题

Question

我正在尝试在“目标时间”部分实现上图....

我只有如下...但是当我调整浏览器大小时位置不正确，我不知道如何在复选框上方添加高峰时间图片。任何人都可以帮忙吗？

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

Jsfiddle 演示:http://jsfiddle.net/a8VpS/1/

Answer 1

你想要这种结构吗？如果是，那么请勾选下面的结构为你打勾

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

Fiddle Demo

这就是你所期望的 --> Check The updated Fiddle Demo