html - HTML / CSS试图将输入文本框移动到设定位置
问题描述
嘿,如果有人能够提供帮助,将不胜感激,我不知道如何将以下文本框移动到我想要的位置。
这是我的 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 是“在此处插入关键字”文本框上方的整个图像,减去 SearchEngineGIF.gif 的“Geoorgle”
解决方案
相反,您可以只使用表单标签
<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:25%;
left:25%;
推荐阅读
- firefox-os - 打开托管的 KaiOS 应用程序时出错
- c# - ASP.NET CORE 3.0 Identity 在 Ubuntu 19.04 上不起作用
- azure - 在 Service Fabric 中将 Windows 服务作为有状态服务运行
- php - Xdebug 不会在断点处停止 - PHP centos Docker
- git - 安全地重命名远程源分支
- mysql - Google Cloud SQL Mysql 5.7 次要版本,如何升级?
- tensorflow - 复合 Poisson Keras 自定义损失函数
- c# - 从多个线程/应用程序同时打印到 Microsoft Print 到 PDF 打印机时出错
- sass - 为什么第一个 Sass 列表项中的“-”字符很重要?
- docker - Docker 正在运行,但我无法访问 localhost - Flask 应用程序