在标签元素中添加文本框(JQuery Mobile) -样式问题

Question

我希望在JQuery移动设备中的单选按钮的标签中有一个文本框，但是它似乎将文本框的父div设置为2px的高度。

<fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice" id="radio-choice-1" value="yes" checked="checked" />
    <label for="radio-choice-1">
        Yes <input type="password" placeholder="Password"/>
    </label>
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />

    <label for="radio-choice-2" >No</label>
</fieldset>

希望您能从中看到我想要实现的目标。也许有一种比添加css更好的方法来解决这个问题。我已经向http://jsfiddle.net/yDhP3/添加了这个问题的示例

Answer 1

看看这是否能满足您的需求！

http://jsfiddle.net/pramodsankar007/55jZM/

<div id="yourCredentials" data-role="page" class="ui-page ui-body-c ui-page-active">
    <div data-role="header" data-theme="b">
         <h1>Login/Register</h1>

    </div>
    <div data-role="content">
         <h3>Your credentials</h3>

        <input type="text" id="email" value="" data-mini="true" placeholder="Email address" class="">
         <h3>Are you a returning user?</h3>

        <fieldset data-role="controlgroup">
            <input type="radio" name="radio-choice" id="radio-choice-1" value="yes" checked="checked" />
            <label for="radio-choice-1">Yes
                <input type="password" placeholder="Password" class="pwdInner" />
            </label>
            <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
            <label for="radio-choice-2">No</label>
        </fieldset>
        <button>Login/Register</button>
    </div>
</div>


$('#radio-choice-1').click(function()
                           {
                               $('input.pwdInner').show();
                           });
$('#radio-choice-2').click(function()
                           {
                               $('input.pwdInner').hide();
                           });


input.pwdInner
{
    position:relative !important;

}