javascript - 切换输入元素的可见性时，文本元素上下摆动

Question

我的布局如下所示:

<ul id="playlists" class="ui-sortable">
    <li data-id="b69c8348-f47c-4156-a975-a2f1009610a8" data-type="3" class="listItem playlist active"><i class="fa fa-list fa-fw"></i>
        <span class="title" title="">
            Playlist 0000
        </span>
        <input type="text" value="Playlist 0000" class="editableTitle hidden" maxlength="255" />

        <span class="count">0</span>
    </li>
</ul>

$('.title').click(function(){
    $('.title').hide();
    $('.hidden').show();
});

$('.hidden').blur(function(){
    $('.title').show();
    $('.hidden').hide();
});

这是一个显示问题的 JS fiddle (在最新版本的 Chrome 中测试):

http://jsfiddle.net/3WEHJ/14/

每当我切换隐藏输入的可见性时，超棒的字体图标就会上下摆动。

我可以用一些垂直对齐技巧来对齐它，但是当输入再次被隐藏时它就会变得错位。有没有办法用一些简单的 CSS 来支持这两种情况？

Answer 1

解决方案是确保输入元素的行高与其周围文本元素的行高相对应。我的超赞字体图标的行高为 14 像素，输入元素的行高未定义，但隐式假定为 16 像素。通过将它设置为 14px 然后将两者对齐，不再闪烁。