html - 我怎样才能避免我之间的小空间和元素？

Question

我有以下内容：

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

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

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

Answer 1

默认情况下，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 示例

Answer 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. 请注意，它目前不受支持，并且该规范是尚未准备好实施的草案。

Answer 3

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

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

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

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

工作小提琴

要不然

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

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

工作小提琴