Question

我将为我的一个项目创建一个jQuery插件，我正在尝试使用div和span来模拟输入，使其更富有＆＃34;。

我没有[输入]，而是[span（包含A删除）+输入]，因此用户不会看到差异，因为他将在没有边框的实际输入上输入，结果（当接受）将出现在场地左侧的一个小矩形框中。

但是我有一个问题：div的顶部和包含左侧文本的span之间始终存在间隙。输入相同，两者的顶部和底部没有相同的边距。我试图删除不正确的上边距（或填充），它看起来像从顶部3px和底部2px。我似乎已经尝试了所有的东西而且我总是最终在span＆amp;的顶部有太多的像素。输入

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

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

感谢您的帮助。

Answer 1

我认为这就是你要找的东西 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;    
}

<强>更新

检查jsfidle http://jsfiddle.net/c5q7hauv/

Answer 2

FIDDLE

我认为你的意思是这个。没有别的办法！

CSS：尝试使用div +输入重现输入但是有一个糟糕的顶部填充

2 个答案: