額外填充

Question

我想有各種各樣的自定義複選框，輸入，我不太肯定這一切填充的是來自..

的想法是，圖像顯示在複選框的位置與文本，並且當它被選中時，圖像的不透明度下降，以顯示它下面的符號，表示它被選中。

我熬下來，在這個小提琴： http://jsfiddle.net/tx76J/1/

<li> 
    <input id="1" type="checkbox"> 
    <label for="1"> 
     <figure> 
      <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">   
     </figure> 
    </label> 
</li>​ 

Answer 1

• 添加list-style: none;您li。問題是由列表標記引起的，如果您刪除黑色背景顏色（我確信它僅適用於演示版本，但對於未來的訪問者：li應始終僅存在於ol或ul中） 。

  

• 另外，設置img到display: block在底部以除去空間。這是因爲默認情況下圖像被視爲內聯（在這個問題中也進行了解釋：White space at bottom of anchor tag ^SO）。

jsFiddle Demo that shows it working