如何删除文本输入和提交按钮之间的空格？答案

【问题标题】：How to remove the space between Text Input and Submit Button?如何删除文本输入和提交按钮之间的空格？
【发布时间】：2019-01-13 10:54:00
【问题描述】：

为什么我的submit 和搜索field 之间有空格？我该如何摆脱它？

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search..." value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

fiddle

【问题讨论】：

因为这些东西之间的代码中有空格。有ways around that，但通常最简单的方法是从代码中删除空格。
How to remove the space between inline-block elements?的可能重复
这是一个小提琴jsfiddle.net/jv655whz - 这是一个链接 - css-tricks.com/fighting-the-space-between-inline-block-elements

标签： html css forms

【解决方案1】：

简单地将它们放在一起:)

<label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Search up in hur" value="" name="s" title="Search for:" /></label><input type="submit" class="search-submit" value="Search" />

【讨论】：

如何在哈巴狗/翡翠中实现这一目标？

【解决方案2】：

为了达到这个目的，首先把Button放在Textbox后面：

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search up in hur" value="" name="s" title="Search for:" /><input type="submit" class="search-submit" value="Search" />
    </label>
</form>

然后使用这个 CSS 移除剩余空间：

.search-field, .search-submit{
    margin:0;
}

现在 Button 和 TextBox 之间没有空格，但是你可以看到它们之间有 2px 的边框来解决这个问题，你也可以添加这个 CSS：

.search-field + .search-submit{
    border:1px solid #a9a9a9;
    border-left:0px;
    height:22px;
}

此 CSS 导致当 search-submit 紧跟在 search-field 之后时，左边框会消失。所以最终的结果是这样的：

Check JSFiddle Demo

【讨论】：

【解决方案3】：

不需要css，只需删除两个或多个元素的缩进或空格并将它们放在一行上

【讨论】：

【解决方案4】：

将此添加到您的 CSS 将解决该问题：

label {
    display:inline-block; 
    width: 212px;
}

JS Fiddle Demo

样式不是很漂亮...这就是我使用引导程序的原因。在引导程序中有内置的类。

【讨论】：