0

いくつかのラジオ ボタンを含む div があります。これらはテキストボックスを表示/非表示にします。

<p>Some text</p>
<div>
    <div>
        <input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> - 
        <input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
    </div>
    <div class="myTextBox">
         <input type='text'>   
    </div>
</div>

<p>Some text</p>​

を表示/非表示にする.myTextBoxと、テキストが数ピクセルずれます。これは、テキストボックスのパディングとマージンによるものです。

これらの設定 (パディング/マージン) を削除せずに、CSS バンプをなくす方法はありますか?

jsFiddle http://jsfiddle.net/nTJZN/1/の例を参照してください。

4

2 に答える 2

5

ここを参照してください。

私がやっていることは基本的にではなくshow()、プロパティhide()を変更していvisibilityます。

function ShowHideTextbox()
{
    if($("#show").is(":checked"))
        $(".myTextBox").css('visibility','visible');
    else
        $(".myTextBox").css('visibility','hidden');   
}

</p>

于 2012-07-27T20:27:43.523 に答える
1

これは、入力ボックスがテキストよりも高いため、入力ボックスが表示されると線が伸びてしまうためです。要素を調べたところ、入力ボックスが表示されているときに行の高さが 28 ピクセルであることがわかりました。そのため、行の高さを 28 ピクセルにすると、次のように問題が解決します。

div
{
 display: inline-block;   
 line-height: 28px;
}

http://jsfiddle.net/X4X3U/を参照してください

于 2012-07-27T20:28:18.253 に答える