使用TokenInput和CSS制作X，“删除按钮”比文本大

Question

我正在使用着名的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>

Answer 1

这可以通过在文本中添加line-height来固定，然后浮动到十字架。

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

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

干杯