0

我将为我的一个项目制作一个 jQuery 插件，并且我正在尝试使用 div 和 span 模拟输入以使其“更丰富”。

而不是[输入]，我将有[跨度（包含一个用于删除的A）+输入]所以用户不会看到差异，因为他将在一个没有边界的真实输入上打字，结果（当被接受时）将出现在字段左侧的一个小矩形框中。

但是我有一个问题：在 div 的顶部和包含左侧文本的 span 之间总是存在间隙。输入相同，两者的顶部和底部边距不同。我正在尝试删除不正确的上边距（或填充），它看起来像距离顶部 3px 和底部 2px。我似乎已经尝试了一切，但我总是在跨度和输入的顶部有太多的像素。

我在这里重现了我的问题（只有几行 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>

我需要一些帮助，我尝试了边距、填充、行高、显示：内联块......但它似乎仍然不起作用。

谢谢您的帮助。

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 回答