4

我有以下内容：

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

如何避免<input>and之间的小空间<span>，以及如何在跨度中居中“-”。

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

4

5 回答 5

3

默认情况下，aspan是一个inline级别元素，它尊重标记中的空白。

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

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

jsFiddle 示例

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

jsFiddle 示例

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

jsFiddle 示例

于 2013-11-03T03:42:10.830 回答
2

您可以使用

  • 元素之间的 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. 请注意，它目前不受支持，并且该规范是尚未准备好实施的草案。
于 2013-11-03T05:14:19.733 回答
1

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

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

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

于 2013-11-03T03:48:47.087 回答
0

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

于 2013-11-03T03:41:56.613 回答
0

您应该为 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 元素添加了边框，因为默认情况下输入有边框。

工作小提琴

要不然

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

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

工作小提琴

于 2013-11-03T04:59:14.787 回答