Question

有没有办法使搜索栏和go按钮完全触及？我正在尝试创建一些搜索栏和go按钮之类的东西。

这是我的代码：

/*SEARCH*/
form#searchform input{background-color:rgba(128, 129, 132, 0.4);   margin-bottom: 10px; border:medium none;   font-size:12px;  padding:10px;  width:173px;}

form#searchform input#s{
width: 150px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;
border-bottom: 1px #868686 solid;  
padding:10px;
}

form#searchform input#btn
{width: 23px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color:#00ADEE;}

<!--  START SEARCH  -->

          <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
          <div>
            <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s"  /> 
          <input name="go" type="submit" value=">" id="btn"  /> 
          </div>
          </form>

    <!--  END SEARCH  -->

目前两者之间存在微小差距，我无法弄清楚原因。我还想在搜索框上填充边框底部，并且#s类的填充也不起作用。任何帮助表示赞赏！

Answer 1

您的问题是文本字段和按钮之间有空格，以下内容解决了问题。

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <div>
    <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s"  /><input name="go" type="submit" value=">" id="btn"  />
  </div>
</form>

修改：赞[{3}}

编辑2：或form#searchform input#s, form#searchform input#btn{float:left;}

Answer 2

试试这个：

form#searchform input#s{ float:left }

样式搜索栏和go按钮没有间隙

2 个答案: