css - 输入类型文本和输入类型按钮之间的差距

Question

我会再次将其显示为图像 :)

我正在设计一个搜索框，但我遇到了奇怪的错误..我的目标是让输入框和设置按钮看起来像一个。所以我用边框设计了它们。如果这两个元素之间没有间隙，它看起来还可以。而且按钮比输入框小 2px。这是我的 CSS

form#search
{
}
input[type=text]
{
  width: 400px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: none;
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  height: 50px;
}
input[type=button]
{
  font-family: 'WebSymbolsRegular';
  width: 40px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: none;
  background: white;
  height: 50px;
}
input[type=submit]
{
  font-family: 'WebSymbolsRegular';
  height: 50px;
}

这是 sachleen 要求的 html。这里没什么特别的..

<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/>
    <input type="button" value="S" tabindex="3"/>
    <input type="submit" value="L" tabindex="2"/>
</form>

我没有制定任何规则来弥补这些差距。添加边距或填充:0，没有任何改变。我也在使用 Eric Meyer 的“重置 CSS”2.0 来重置 css。

Answer 1

这对我有用

form {
  border: 1px solid rgb(217, 217, 217);
  width: 598px;
  background: green;
  font-size:0;  

  input {
    padding: 0px;
    border: 0px;
    font-size:18px; 
    height: 30px;
    background: white; 
  }
  input[type='text'] {
    width: 498px;
  }
  input[type='button'], input[type='submit'] {
    width: 50px;
  }
}

找到了最终的解决方案!并且在所有浏览器上都一样。键 - font-size: 0 ontainer(在本例中为表单)，将填充设置为 0px，所有输入的高度相同。我将表单宽度设置为 598(+2 * 1 像素边框)，我可以将输入宽度设置为总和 598。现在我不需要使用花哨的 display: box 和 float: left 来破坏一切。