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

标签 javascript html css

我有一个布局,看起来像:

<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 来支持这两种情况?

最佳答案

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

关于javascript - 切换输入元素的可见性时,文本元素向上/向下摆动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22460379/

相关文章:

php - 使用 PHP 显示特定的 block 大小

javascript - JavaScript检索元素的CSS值

html - 将html TD宽度设置为字符数

javascript - 在单独的网页中将图片从一个div动态上传到另一个div

动态 HTML 文本框和 PHP 的 Javascript 验证

php - 如何在 PHP 中回显动态 session 变量?

html - 引导栏和可变高度的段落

javascript - 单击 JavaScript 中特定类的所有元素?

javascript - 在 nodejs 中的 postgres 中保存记录之前,对象 js 模型字段数据 trim

javascript - 我如何让这个循环工作?它返回未定义的 angularjs