html - CSS : Trying to reproduce input with div+input but having a bad top padding

Question

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

我将使用 [span(包含用于删除的 A)+ input] 而不是 [ input ]，这样用户将不会看到差异，因为他将在没有边框的真实输入上键入，而结果(当accepted) 将出现在字段左侧的一个小矩形框中。

但我有一个问题:div 的顶部和包含左侧文本的范围之间始终存在间隙。输入相同，两者的顶部和底部边距不同。我正在尝试删除不正确的顶部边距(或填充)，它看起来像顶部 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>

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

感谢您的帮助。

Answer 1

我想这就是你要找的 1.添加一个 float 左 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/