Question

下面的HTML定义了文本输入和提交按钮。我希望他们能够紧挨着，没有差距。当我的代码看起来像这样，那里有一个奇怪的差距，即使我在所有输入元素上设置了边距

    <form action="http://google.com/search" method="get" class="search">
      <input type="text" name="q">
      <input type="submit" value="Search">
    </form>

但是，如果2个输入之间的HTML没有换行符

    <form action="http://google.com/search" method="get" class="search">
      <input type="text" name="q"><input type="submit" value="Search">
    </form>

神秘的差距消失了，页面看起来像我认为应该！我的HTML和CSS都是100％有效。

我有什么方法可以用CSS解决这个问题吗？我无法保证HTML中的中断位置。

提前致谢！

Answer 1

神秘只是一个空间角色。输入元素是内联元素，所有空格字符（包括换行符）都被解释为HTML中的空格字符。

您可以使输入元素阻止元素并将它们彼此相邻浮动。在表单上应用overflow设置（但没有大小）会使其包含浮动元素，以便它们不会延伸到表单之外。

CSS代码：

.search { overflow: hidden; }
.search input { float: left; }

Answer 2

您的换行符和缩进符插入空格。 一般情况下，没有编辑HTML就无法修复它，但可能能够创建元素display: block并浮动它们，这将使空间消失了。但是，这并不适用于所有情况。

Answer 3

您可以将display设置为inline或inline-block并尝试使用负边距对其进行抵消，例如，

input { margin-right: -0.4em; }

或者您可以浮动元素（将自动将它们设置为display:block）：

input { float: left; }

/* overflow: auto on the parent of floated elements will "shrink wrap" its floated content */
form { overflow: auto; }

Answer 4

这是一个众所周知的问题，在技术上并不是一个“错误”：HTML中的空格被解释为单词之间的空格，因此显示为空白字符。

正如所建议的那样，浮动很可能会解决这个问题，虽然还有一个 hack 我有时会使用它来摆脱inline-block元素空间，也就是说，设置容器font-size为0，如有必要，重置子元素中的属性。

在您的情况下，此规则应足以消除您的问题：

form.search {
    font-size: 0
}

Example

Answer 5

这是你的解决方案：

 <form action="http://google.com/search" method="get" class="search">
  <input type="text" name="q" style="margin:0"><input type="submit" value="Search" style="margin:0">
</form>

JSFiddle

网页中的神秘边缘

5 个答案: