Question

我想将图像放在文本输入框内，并尝试通过将图像标记嵌套在输入标记内并使用相对位置进行输入和图像的绝对定位并将图像设置为“正确”来定位图像。 'top'值为0.我认为这会将图像放在文本框的右侧。相反，它将图像放在网页的右侧。我不确定为什么会这样，我通过更改“顶部”和“正确”值找到了一个解决方案，将它定位在我想要的位置，但它看起来似乎是第一种方式应该有效，有人可以解释为什么它没有？

这是文本输入和图像的HTML。

<input = "text" id="searchbar"> 

            <a href="#voice"> <img src ="microphone.png" id="voicebutton"/> </a>

</input>

这是我可以使用的CSS。

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:0;
    top:0;
}

这是有效的CSS。

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:395;
    top:207;
}

Answer 1

有两种方法：

1 - 使用属性background-size和background-position在输入框中设置background-image。 示例：的

input[type=text] {
  box-sizing: border-box;
  padding-left: 10px;  
  font-size: 40px;
  width:85%;
  height:55px;
  border: 2px solid black;
  background-color: floralwhite;
  background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: right;
}

input[type=text]:focus {
  background-color: pink;
  outline: none;
}

<input type="text" placeholder="write here" id="searchbar">

2 - 使用负边距将图像悬停在 （您可以将图像设置为链接）。例如：

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:85%;
      height:55px;
      border: 2px solid black;
      background-color: honeydew;  
      vertical-align: top;
    }

    input[type=text]:focus {
      background-color: skyblue;
      outline: none;
    }

img {
margin-top: 3px;
margin-left: -60px;  
}

<input type="text" placeholder="write here" id="searchbar"><a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>

Answer 2

在HTML中，输入标记没有结束标记（与XHTML相反），因此您的标记位于输入标记之外。

Answer 3

首先，您的像素中不能包含小数，例如height: 37.5px;。这不会奏效。另外right: 395;不起作用，因为它没有指定用法：像素，ems，百分比？ input="text"不正确，应为input type="text"，因为这可能是email或radio。

也就是说，要实现您想要的功能，您可以在输入字段周围添加一个包装器（如.box-wrapper），并为其提供与输入字段大小相同的相对位置。这将结束以下示例。

＆＃13;

.box-wrapper {
    position: relative;
    width: 600px;
    height: 38px;
}

#searchbar{
    border: 1px solid #dbdbdb;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 38px;
    position: relative;
}

#voicebutton{
    width: 16px;
    height: 23px;
    position: absolute;
    top: 0;
    right: 0;
}

＆＃13;

<div class="box-wrapper">
  <input type="text" id="searchbar">
  <a href="#voice"><img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/></a>
</div>

＆＃13;

Answer 4

输入标记在HTML中没有结束标记，您应该从HTML代码中删除结束标记，此外，您可以将元素放在输入框上，将CSS更改为这样的（您的CSS几乎是正确的，问题是HTML）：

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:16px;
    top:16px;
}

将图像定位在文本输入框内

4 个答案: