0

プロジェクトの 1 つに jQuery プラグインを作成し、div と span を使用して入力をシミュレートして「リッチ」にしようとしています。

[ input ] の代わりに [ span (削除するための A を含む) + input] を使用するので、ユーザーは境界線のない実際の入力を入力するため、違いがわかりません。結果 (受け入れられた場合) は次のようになります。フィールドの左側にある小さな長方形のボックスに表示されます。

しかし、私には 1 つの問題があります。div の上部と左側のテキストを含むスパンの間には常にギャップがあります。入力についても同じですが、2 つの上部と下部のマージンは同じではありません。その不適切な上部マージン (またはパディング) を削除しようとしています。上部から 3 ピクセル、下部から 2 ピクセルのように見えます。私はすべてを試したようですが、スパンと入力の上に常にピクセルが多すぎます。

ここで問題を再現しました（CSSコードの数行のみ）：

http://jsfiddle.net/JB9Uq/1/

<div class="input-reference"><span>Content in span <a href="#"><i class="icon-remove">x</i></a></span><input type="text"></div>

マージン、パディング、行の高さ、display:inline-block を試してみましたが、まだ機能していないようです。

ご協力ありがとうございました。

4

1 に答える 1

0

それがあなたが探しているものだと思います 1.フロートを左に追加します 2.高さと行の高さを追加します

<div class="input-reference"><span>Content in span <a href="#"><i class="icon-remove">x</i></a></span><input type="text"></div>

input, textarea, span {
    font-family:sans-serif;
    font-size:12px;
    outline: none;
    margin: 0;
    border: 1px solid transparent;
}

.input-reference{
    display: inline-block;
    border: 1px solid #DDDDDD;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-reference:after{
    content: "";
    display: block;
    clear: both;
}

.input-reference span,
.input-reference input{ 
    display: inline-block;
    float: left;
    padding: 0 5px;

    /*adjust your height here*/
    line-height: 20px;
    height: 20px;
}

.input-reference span{
    background-color: #53A9FF;  
    color: #fff;    
}

アップデート

jsfiddle http://jsfiddle.net/c5q7hauv/を確認してください

于 2015-09-08T15:16:16.227 に答える