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

这是因为你的输入框比文字高，导致输入框显示时行变长。通过检查元素，我确定当输入框可见时行高为 28px，因此应用行高 28px 可以解决问题，如下所示：

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

见http://jsfiddle.net/X4X3U/

于 2012-07-27T20:28:18.253 回答