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来移动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>

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

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

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

问题描述投票：-1回答：1

1个回答

最新问题

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

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1