【问题标题】:Horizontally Align Text w/ Ellipsis with jQuery button使用 jQuery 按钮水平对齐带省略号的文本
【发布时间】:2013-12-11 07:35:23
【问题描述】:

我正在尝试将一些文本(带省略号)与 jquery 按钮水平对齐,但不知道发生了什么。

这是一个显示我的问题的 jsfiddle:

http://jsfiddle.net/5bVDu/

<span>
    <span id='heading'>Long Heading That Requires Ellipsis</span>
    <span id='hiddenID'>ID</span>
    <button id='closeTab'></button>
</span>

如您所见,按钮似乎与文本有点偏移(较低),我怎样才能让它们显示为水平对齐?

我试过搞乱填充、边距、垂直对齐但没有成功,真的很感谢你们任何 css 大师的帮助!谢谢!

【问题讨论】:

    标签: jquery html css jquery-ui vertical-alignment


    【解决方案1】:

    vertical-align:top 添加到#closeTab

    #closeTab {
        height: 16px;
        width: 16px;
        margin-left:5px;
        vertical-align:top;
    }
    

    jsFiddle example

    【讨论】:

    • 啊谢谢!所以我明白这里发生了什么,文本默认为vertical-align:top,按钮默认为vertical-align:bottom...这就是它们最初偏移的原因?
    • 实际上,非替换内联元素的默认垂直对齐方式是基线,因此您也可以在#heading for the same result. jsfiddle.net/j08691/5bVDu/9 上指定vertical-align:top
    猜你喜欢
    • 2019-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-08
    • 1970-01-01
    • 2012-08-21
    相关资源
    最近更新 更多