特殊搜索表格答案

【问题标题】：Special search form特殊搜索表格
【发布时间】：2014-06-12 06:52:50
【问题描述】：

我尝试用我自己的设计制作特殊的搜索表单，我想做文本输入和btn连接在一起，我尝试了所有可能的解决方案，但始终是文本输入和 btn 之间的空间，

代码如下：

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<table border="0">
<tr>
<td><input class="search-box" type="text" value="" name="s" id="s" /></td>
<td><input type="submit" id="searchsubmit" value="Search" /></td>
</tr>
</table>
</form>

和css：

#searchsubmit {
background: #000000;
}
.search-box {
border: 1px solid #000000;
}

我的错误在哪里？

谢谢。

【问题讨论】：

边框肯定会留有空间，您需要不使用表格或将填充设置为 0
别听他们的，关于你之前的问题，你可以试试device-pixel-ratio，google一下
div {border: 1px solid #000} @media(-webkit-min-device-pixel-ratio: 1.25),@media(min--moz-device-pixel-ratio: 1.25) ,@media(-o-min-device-pixel-ratio: 1.25){.one {border: .75px solid red}}
1

2

标签： php html css search indexing

【解决方案1】：

#searchsubmit { margin-left:-3px }

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  <input class="search-box" type="text" value="" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="Search" />
</form>

但在 iOS 中看起来不正确，因为按钮是圆形的

http://jsfiddle.net/mplungjan/NnXcm/

【讨论】：

【解决方案2】：

取决于浏览器。在你的 css 中尝试这个来规范化表格（适用于许多浏览器，例如 IE）：

 table{
    border-collapse: collapse;
    border-spacing: 0;
}

【讨论】：