Question

我有一个包含几个单选按钮的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/

上的示例

Answer 1

请参阅here。

我正在做的事情基本上不是show()而是hide()我正在改变visibility属性。

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

Answer 2

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

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

请参阅http://jsfiddle.net/X4X3U/

显示/隐藏时边距/填充碰撞div

2 个答案: