Question

我无法弄清楚导致提交按钮和搜索框输入区域之间的空白是什么 http://i.imgur.com/q4Dqz.png

HTML：

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<p><input type="text" class="field" name="s" id="s"  placeholder="Search" />
<input type="submit" class="submit" name="submit" value="Traži" /></p>

的CSS：

#searchform {
    float: right;
    padding-top: 10px;
    position: relative;
}

header input#s {
    margin: 0;
    border: none;
    height: 29px;
    width: 250px;
}

header input:active  {
    border: none;
}

header input.submit {
    border: none;
    height: 30px;
    width: 30px;
    margin: 0;
    text-indent: -99999px; 
    background: white url(images/search.png) 0 0 no-repeat;
    padding-right:20px;
}

Answer 1

http://jsfiddle.net/butuzov/MCtc3/

对父元素使用font-size：0（在您的情况下为p）或避免输入元素之间的空格

Answer 2

这是最常见的问题之一，拥有一个美观的搜索栏非常重要，您做得不错，但是创建更好的搜索栏的最佳方法是这样，按照我的步骤逐步进行操作，将在短时间内为您带来很多帮助，让您拥有想要的外观：

您创建表单标签，并在内部创建一个带有expl类的div：searchBarContainer

在您的div内创建一个input：text和button不使用input：btn //现在您有了一个表单/ div /输入文本和按钮

<form  method="get" action="">
<div class="searchBarContainer">
    <input type="text" class="searchBox" name="s" id="s"  placeholder="Search" />
    <button class="btn-search">
       <img src="search-icn.png" >
    </button>
</div>

现在我们有了结构，我们只需要一种样式即可，看起来丑陋对吗？当然是，所以

.searchBarContainer {
border: none;
height: 2.5rem;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
box-sizing: border-box;
width: 20%;
max-width: 60%;
display: flex; /* <===== the most iportant line in this code */

}

在此dyplay代码中，您需要集中精力进行所有操作：
display：flex;
felx：1；

.searchBarContainer .searchBox {
    flex : 1; /*  <===== the most iportant line in this code */
    font-size: 14px;
    color: #000;
    border: none;

}

最后是按钮样式：

.btn-search {
border: none;
background-color: #fff;}

最终结果

Answer 3

.sidebar.widget-area .widget.widget_search .search-form .search-submit {
    position: absolute;
    padding: 0 19px;
    background-image: url(assets/images/search.png);
    border: 0;
    background-color: transparent;
    right: 0px;
    top: 29px;
    color: #7a7a7a;
    cursor: pointer;
    font-size: 0px;
    height: 17px;
    width: 10px;
    background-repeat: no-repeat;
}

设置默认的wordpress搜索框样式

3 个答案: