单选按钮和标签之间的空间不同的不同元素

时间:2013-06-19 20:47:09

标签: html radio-button label spacing

我无法弄清楚为什么第一个元素的无线电输入和链接之间的间距不同于其他两个元素。

这是HTML:

<div class="citationChoice">    
    <label for="mla">
        <input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
        <a href="javascript:void(0);" id="mla_text">MLA</a>
    </label> 

    <label for="apa">
        <input type="radio" name="citation" value="apa" id="apa_button"> 
        <a href="javascript:void(0);" id="apa_text">APA</a>
    </label> 

    <label for="chicago">
        <input type="radio" name="citation" value="chicago" id="chicago_button"> 
        <a href="javascript:void(0);" id="chicago_text">Chicago Manual of Style</a>
    </label> 
</div>

jsFiddle

出于某种原因,在没有应用任何css的情况下,mla单选按钮比其他单选按钮更接近MLA链接。

(我知道HTML并不完全正确。如果可能的话,我必须按原样保留HTML。)

1 个答案:

答案 0 :(得分:2)

你在<a之前有一个空格,jsfiddle正在解释这个空格。第一个MLA链接没有这个空间,这就是为什么它靠近单选按钮

BEFORE -

id="apa_button"> <a

FIX后 -

id="apa_button"><a