输入类型文本和输入类型按钮之间的间隙

时间：2012-11-13 18:59:52

标签： css

将它再次显示为图像:) enter image description here

我正在设计一个搜索框，但我遇到了奇怪的错误.. 我的目标是使输入框和设置按钮看起来像一个。 所以我用边框设计了它们。它看起来还不错，如果这两个元素之间只有差距..而且按钮比输入框小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;
}

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

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

4 个答案:

答案 0 :(得分：3)

这对我有用

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

找到终极解决方案！并且在所有浏览器上都一样。键 - 字体大小：父ontainer上的0（在这种情况下为表单），将填充设置为0px，所有输入的高度相同。我将表格宽度设置为598（+2 * 1 px边框），我可以将输入宽度设置为598。现在我不需要使用花哨的显示：框和浮动：左边打破一切。

答案 1 :(得分：0)

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

答案 2 :(得分：0)

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

http://jsfiddle.net/JLuyL/

密钥位于CSS中的display属性中。

答案 3 :(得分：0)

你在想它！

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

相关问题
最新问题