Question

我有以下内容：

<input style="width: 20px" data-ng-model="row.number" type="text" />
<span style="width: 20px">-</span>

如何避免<input>和<span>之间的小空间，以及如何将范围中的“ - ”居中。

我需要一个解决方案，而不是将所有内容放在一行，因为我的IDE会重新格式化为多行。

Answer 1

默认情况下，span是inline级别元素，它尊重标记中的空格。

有多种方法可以删除它，一种方法是删除标记中的空格：

<input style="width: 20px" data-ng-model="row.number" type="text" /><span style="width: 20px">-</span>

jsFiddle example

另一种方法是将父元素设置为font-size:0px

jsFiddle example

另一个是设置负边距以取代空白。 span { margin: -4px; }

jsFiddle example

Answer 2

考虑使用连接和中断技术：

<input style='width:20px;' data-ng-model='row.number' type='text' /><span
style='width:20px;'>-</span>

注意标签打开后的换行符。这是一种平衡长行与虚假空白的技术。

Answer 3

您可以使用

元素之间的HTML注释：

<div><!--
    --><input style="width: 20px" data-ng-model="row.number" type="text" /><!--
    --><span style="width: 20px">-</span><!--
--></div>

将>关闭到下一行：

<div
    ><input style="width: 20px" data-ng-model="row.number" type="text"
    /><span style="width: 20px">-</span
></div>

font-size:0（必要时将其重置为儿童）
float:left（记得清除它在浮动元素后添加clear:both元素）
在不久的将来，我们将能够使用text-space-collapse: trim-inner。请注意，目前不支持它，spec草稿尚未准备好实施。

Answer 4

将输入和跨度放在html中的同一行

Answer 5

您应该为input元素和span元素提供相同的css属性。

input,span{
    float: left; /* helpful to remove the gap */
    line-height: 15px;  /* centering by giving the value of height */
    height: 15px;    /* same height to both the elements */
}
span{
    border: 1px solid transparent;
    border-left-width: 0px; /* removing left border to decrease the gap */
}

在上面的样式中，我给span元素设置了边框，因为默认情况下输入有边框。

Working Fiddle

或者

您也可以使用display: table-cell并执行以下操作：

input, span {
    display: table-cell;
    vertical-align: middle;
}
input {
    outline: none;
    padding: 0px;
    margin: 0px;
}
body { /* or parent element */
    display: table;
}

Working Fiddle

如何避免<input />和<span>元素之间的小空间？</span>

5 个答案:

或者