1

我正在使用著名的 TokenInput 并且我正在重新设置 CSS 的样式，并且我想让“X”看起来更大，但文本不会与它对齐并停留在底部。任何想法我怎么能做到这一点？我有点难过。

在此处输入图像描述

更新：

我现在在 CodePen 上放了一个工作演示（当时 JSFiddle 已经关闭，但这也很好）。

http://cdpn.io/oauIs

谢谢

CSS：

/*actual token created*/
li.token-input-token-facebook 
{
    overflow: hidden; 
    height: auto !important; 
    height: 15px;
    margin: 2px;
    padding: 5px 3px 5px 5px;
    background: -webkit-gradient(linear, left top, 
                left bottom, from(rgba(170, 214, 221, 1)), to(rgba(0, 128, 183, 1)));
    color: white;
    cursor: default;    
    font-size: 11px;
    border-radius: 4px;
    float: left;
    white-space: nowrap;
}

/*actual writing inside token*/
li.token-input-token-facebook p 
{
    display: inline;
    padding: 0;
    margin: 0;
}

/*Little "x" button to cancel token*/
li.token-input-token-facebook span 
{
    color: white;
    margin: 0 0 0 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;  /*Here is where I have made it bigger */
}

HTML

<ul class="token-input-list-facebook">
    <li class="token-input-token-facebook" data-uniqueid="u1"><p>Duval,B</p>
    <span class="token-input-delete-token-facebook">×</span>
    </li>
</ul>
4

1 回答 1

3

这可以通过在文本中添加 line-height 并浮动到十字来解决。

检查这个小提琴：http ://codepen.io/anon/pen/jdJAs

我分别在第 56 行和第 66 行添加了上述属性。由于文本的字体大小以百分比指定，因此您可能需要在修改字体大小时手动调整行高。

干杯

于 2013-01-30T17:44:56.973 回答