CSS樣式主題化的複選框

enter image description here 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>

的jsfiddle DEMO：http://jsfiddle.net/a8VpS/1/

來源

2014-01-22 nodeffect

調整大小不正確？你能指望什麼？ – MrUpsidown

當我縮小瀏覽器的尺寸時，複選框和線條不合適......底部的2個複選框應該與頂部的複選框對齊，當我的窗戶縮小尺寸時，線條會消失或轉到底線。 ... – nodeffect

你有鏈接到頁面嗎？或者你可以創建一個jsfiddle來說明嗎？看來你正在使用Twitter Bootstrap。爲什麼浮動DIV？你是否從某處複製代碼？ – MrUpsidown

你想這種structure.if的是，那麼請檢查下面的結構你複選框

<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

來源

2014-01-22 08:46:06 Saurabh

這幾乎是我想要的，但我不是說我需要單擊複選框以顯示圖像。我需要它永遠在那裏。非常喜歡我在第一篇文章 – nodeffect

上面提到的圖片感謝您的更新答案。這真的有幫助...;） – nodeffect

CSS樣式主題化的複選框

回答

相關問題