Question

我在div（文本框和图像）中有两个输入元素，看起来像一个搜索栏，在框的边框内有一个放大镜提交图标。当我注释掉图像输入时，文本框完全位于div内部。当我取消注释图像输入时，文本框会向下移动几个像素。添加导致文本框移动的图像元素是什么意思？

HTML：

<div id="top_search_box">
    <input type="text" name="keywords" id="keywords" value="Search this site" size="15" maxlength="80"/>
    <input type="image" id="search_button" src="images/layout/search_icon.png" alt="Submit"
                       name="submit" value="Submit"/>
</div>

CSS：

#top_search_box {
  border: 1px solid #dedede;
  height: 25px;
  margin: 4px 0;
  padding: 4px 0;
}

#top_search_box #search_button {
  height: 24px;
  width: 33px;
}

#top_search_box #keywords {
  width: 190px;
  height: 24px;
  border: 0;
  padding: 0;
}

Answer 1

这可能是不同输入之间的差异，使用好CSS Reset。

Answer 2

我就是这样做的。

HTML

<input type="submit" value="Submit" />

CSS

#top_search_box input[type=submit]{
  background: url(images/layout/search_icon.png) no-repeat;
  height: 24px;
  width: 33px;
  padding: 0;
  margin: 0;
  text-indent: -9999em;
}

对于IE，您可能希望将“提交”按钮的值设置为“”

我假设您不希望输入的值覆盖图像。如果这样做，只需删除text-indent。

HTML图像输入元素更改div内其他元素的垂直布局

2 个答案: