网页中的神秘边界

下面的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％有效的。

有没有办法让我解决这个问题？我无法保证在HTML中会出现什么情况。

在此先感谢！

来源

2013-08-25 Eric the Red

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

您可以使输入元素块元素相互浮动。在表单上应用overflow设置（但不包含大小）将使其包含浮动元素，以便它们不会扩展到表单之外。

CSS代码：

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

来源

2013-08-25 19:51:30 Guffa

你的换行符和缩进插入一个空格。一般，没有办法解决它没有编辑的HTML，但你可能能够使元素display: block和浮动它们，这将使空间消失。但是，这在所有情况下都不起作用。

来源

2013-08-25 19:46:35 icktoofay

-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-25 19:47:56 Apalabrados

你的答案似乎在暗示除去换行和缩进（除了制作风格在线，这将无关紧要）。然而，这个问题明确地否定了这个解决方案：“我不能保证在HTML中会有什么断点。” – icktoofay

你可以离开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; }

来源

2013-08-25 19:50:07

这是一个非常著名的问题，在技术上是一个“错误”：HTML中的空格就会解释为词之间，因此显示为空白字符空格。

至于建议，浮动将最有可能解决这一问题，但还有另一种破解我有时用它来摆脱inline-block元素空间，那就是，容器font-size设置为0，并在必要，重置子元素中的属性。

在你的情况下，这个规则应该足以消除你的问题：

form.search { 
    font-size: 0 
}

Example

来源

2013-08-25 19:57:21

网页中的神秘边界

回答

相关问题