2013-03-25 118 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