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 に答える