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

Question

为什么我的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

Answer 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" />

Answer 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之后的{{1}}位置消失。 所以最终的结果是这样的：

<强> Check JSFiddle Demo

Answer 3

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

Answer 4

将此添加到CSS将解决此问题：

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

<强> JS Fiddle Demo

造型不是很漂亮......这就是我使用bootstrap的原因。在bootstrap中有内置的类。