HTML / CSS 尝试将输入文本框移动到设定位置

Question

嘿，如果有人能够提供帮助，我将不胜感激，我不知道如何将以下文本框移动到我想要的位置。

这是我的HTML代码：

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="Stylesheet.css">


</head>

<body>

<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">

<input type="text" placeholder="Insert Keyword Here">


</body>
</html>

这是它后面的 CSS：

.custom1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-210px);
  width: 23%;
}

.custom2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(+25px);
  width: 25%;
}

input[type=text]{
    width:20%;
    border:2px solid #000000 ;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
    font-size: 20px;
    text-align: center;
  }

input[type=text]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;

  }

input[type=text]::placeholder{
    font-family: Calibri;
    font-size: 20px;
    font-style: italic;
    text-align: center;
  }

如果有人知道如何使其在放大和缩小时不移动，这也会很有用，将位置设置为固定无济于事，因为我通过向上/向下 y 像素移动图像内部的 gif

编辑 - MainBrowser.png 是 "Insert Keyword Here" 文本框上方的整个图像，减去 "Geoorgle" 即 SearchEngineGIF.gif

Answer 1

相反，您可以只使用表单标签

<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>

根据需要更改图片来源和宽度。

如果需要，您也可以使用 table 标签

关于图片不动，固定好位置后，将表单的top和left参数放在样式中。

示例：

top:25%;
left:25%;

HTML / CSS 尝试将输入文本框移动到设定位置

HTML / CSS trying to move input text box to a set positon

html

css

search-engine