0

我正在尝试创建一个使用一些图像的自定义表单输入，它应该如下所示： 在此处输入图像描述

我尝试了以下方法：

<style>
input {
    background-image: url(../img/search-background-middle.png);
    background-repeat: repeat-x;
    padding: 17px 0;
    font-size: 12px;
    border: none;
    margin: 0;
}

form {
    padding: 0;
    margin: 0;
}
</style>

<body>
<form>
    <img src="../img/search-background-left.png"/>
    <input type="text" value="   start typing to search..." size="40" maxlength="255"         />
    <img src="../img/search-background-right.png"/>
</form>
</body>

结果是：

在此处输入图像描述

为什么？？我不仅对解决方案感兴趣，而且对这不起作用的原因感兴趣。我认为我对彼此相邻的内联元素的理解是有缺陷的。

4

3 回答 3

1

尝试将垂直对齐设置为顶部

form * {vertical-align:top;}

img还删除s 和 the之间的空格input

于 2012-06-23T23:59:36.357 回答
1
  1. 删除img和input元素之间的空格（包括换行符）
  2. 在元素上设置高度和行高input以匹配图像高度
  3. 将 padding 和 margin 设置为 0 input。
于 2012-06-24T00:00:14.867 回答
1

您可能还需要添加一个浮点数：left !important; 到输入。有时，当事情没有安排好时，这可以解决我的问题

于 2012-06-24T02:01:40.273 回答