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 的“Reset 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 on parent ontainer（在本例中为表单），将填充设置为 0px，并且所有输入的高度相同。我将表单宽度设置为 598（+2 * 1 px 边框），我可以将输入宽度设置为总和 598。现在我不需要使用花哨的 display: box 和 float: left 来打破一切。

Answer 2

您正在尝试将两种不同的输入类型合并为一种，文本和按钮。它们具有不同的自定义属性，因此肯定会出现布局问题。也就是说，您可以使用按钮上的边距值来调整它们，但它不会跨浏览器兼容。

Answer 3

做了一些作弊（给了按钮 2px 额外），但这相当有效，除了那些用于设置/搜索的图像：

http://jsfiddle.net/JLuyL/

关键在于displayCSS 中的属性。

Answer 4

你想多了！

<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>

内联元素在代码中看到空白。从字面上看，上面删除了空格。

有关更多信息，请参见此处：https ://css-tricks.com/fighting-the-space-between-inline-block-elements/