2013-03-25 196 views
1

當我使用jQuery創建一個複選框和一個標籤時,它的功能很好(即:如果單擊標籤,複選框被選中),但是瀏覽器分配給標籤的默認視覺外觀與爲非標籤創建的標籤分配的默認視覺外觀不同。動態創建複選框和標籤

[x] normal label 
[x]label created on the fly 

區別在於標籤和複選框之間的空白(邊距)。

有關這裏發生的事情的任何想法?

在飛行的複選框/標籤創建的代碼如下:

$('<input type="checkbox" id="foo"/><label for="foo">bar</label>') 

的複選框/標籤創建的代碼不上即時如下:

<input type="checkbox" id="baz"/><label for="baz">quz</label> 
+1

嘗試在發佈此類問題時進行實時演示。這與您的[給定代碼](http://jsfiddle.net/W4y6t/)無關。 – 2013-03-25 02:52:06

+3

您確定輸入和標籤之間沒有空格嗎?還可以使用檢查器來查看是否有任何可能影響元素的CSS。 – Musa 2013-03-25 02:53:46

+0

檢查你的html元素與你的瀏覽器開發工具,看看發生了什麼,檢查元素內容和應用樣式 – 2013-03-25 03:05:54

回答

1

這是發生了什麼事: http://jsfiddle.net/kSjJZ/

<body> 
    <ul id="bla"> 
     <li> 
      <input type="checkbox" id="baz"/><label for="baz">quz</label> 
     </li> 
     <li> 
      <input type="checkbox" id="foo"/> 
      <label for="foo">quz</label> 
     </li> 
    </ul> 
</body> 

基本上,如果這兩個標籤(輸入和標籤)之間用空格分隔,那麼這個空間解釋就是\ r \ n

+0

所以你找到了你的答案,我猜。 – Sangeeta 2013-03-25 03:26:24