我无法删除两个输入字段之间的边距

我试图删除搜索栏和“Go！”之间的边距按钮在本页顶部：http://beta.linksku.com/我无法删除两个输入字段之间的边距

我已尝试删除所有样式并添加margin:0;padding:0;border:none;，但两个元素之间仍有余量。我无法在JSFiddle上复制这个问题，但它发生在我网站上的所有浏览器中。

来源

2012-03-23 Leo Jiang

有什么问题？您想要将Go按钮和输入字段放在一起吗？ – Connor 2012-03-23 00:57:38

如果您在“Go！”上放置了类似负余量的内容（例如'margin-left：-5px'），会发生什么情况？按钮？ – 2012-03-23 00:59:23

这是元素inline-block如何运作。

通常当您使用inline-block元素时，您经常在段落中使用它们，所以字母之间的空格必须一致。 inline-block元素也适用于此规则。

如果你想完全删除空间，你可以可以漂浮的元素。

float: left;

您还可以从模板文档中删除空格。像这样：

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />

来源

2012-03-23 01:00:39 martinjlowm

你可以设置字体大小为0：不需要浮动！ – benesch 2012-03-23 01:02:12

你当然可以！我确实发现浮动是一种更合理的方式来解决这个问题。我应该删除“必须”部分:) – martinjlowm 2012-03-23 01:04:34

@primatology将字体大小设置为0？！？！你从哪里学到的？在这种情况下，“浮动”是最好的答案，因为OP希望将元素移出正常流程，以更好地控制定位... – xandercoded 2012-03-23 01:04:53

该空格与您的字体大小有关。你可以通过你的投入在容器上添加font-size:0删除它，在这种情况下一种形式，就像这样：

form { 
    font-size: 0; 
}

来源

2012-03-23 01:00:18

您看到的空间是应用于内联元素的默认填充。最简单的黑客？在form上设置font-size: 0，然后重置输入和按钮上的实际字体大小。

魔法。

form { 
    font-size: 0; 
} 

form input { 
    font-size: 12px;

为什么会发生这种情况？浏览器将input之间的空格解释为文本空间，并相应地进行渲染。你也可以把所有的元素一起用一条线擦掉，但这是难看的代码汤。

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"> 
     <input type="submit" value="Go!" class="btn"> 
     </form>

变为：

来源

2012-03-23 01:01:24 benesch

@Xander，我不同意。浏览器（ – benesch 2012-03-23 01:04:32

）之间的空间宽度不一致，虽然此解决方案需要更多击键，并且如果在多个区域中实施，可能会变成一个难题。 – xandercoded 2012-03-23 01:09:40

在Mac上使用Chrome，如果我编辑的形式节点作为HTML开发人员工具中，两个关闭标签之间移除空间，让我可以摆脱空间的：

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn"> 
     </form>

来源

2012-03-23 01:05:51

一种方法是删除空间，但如果你不愿意拥有不可读单行一塌糊涂，你可以使用HTML注释：

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><!-- 
    !--><input type="submit" value="Go!" class="btn"> 
</form>

来源

2017-06-08 08:48:18 BusyBeingDelicious

我无法删除两个输入字段之间的边距

回答

相关问题