2

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

    <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 中的中断位置。

提前致谢！

4

5 回答 5

3

谜团只是一个空间字符。输入元素是内联元素，所有空白字符（包括换行符）在 HTML 中都被解释为空格字符。

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

CSS 代码：

.search { overflow: hidden; }
.search input { float: left; }
于 2013-08-25T19:51:30.793 回答
0

您的换行符和缩进插入一个空格。一般来说，如果不编辑 HTML 就无法修复它，但您可以制作元素display: block并浮动它们，这将使空间消失。不过，这并非在所有情况下都有效。

于 2013-08-25T19:46:35.133 回答
0

您可以将display设置保留为inlineorinline-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; }
于 2013-08-25T19:50:07.353 回答
0

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

正如建议的那样，浮动很可能会解决这个问题，尽管我有时会使用另一种技巧来摆脱inline-block元素空间，即将容器设置font-size 为 0，并在必要时重置子元素中的属性.

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

form.search {
    font-size: 0
}

Example

于 2013-08-25T19:57:21.643 回答
-1

这是您的解决方案：

 <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

于 2013-08-25T19:47:56.030 回答