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小提琴，显示了这个问题（在最新版本的Chrome中测试过）：

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

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

我能够将它与一些垂直对齐技巧对齐，但是当再次隐藏输入时它会变得不对齐。有没有办法用一些简单的CSS支持这两种场景？

Answer 1

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

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

1 个答案: