gpt4 book ai didi

html - anchor 文本输入到图像上的行

转载 作者:行者123 更新时间:2023-11-28 10:24:49 25 4
gpt4 key购买 nike

我想将文本输入框锚定到图像上的确切位置。我可以用 CSS 做到这一点没有问题,但是一旦我调整窗口大小时,输入框就会失去对齐。

我希望能够在一定程度上允许调整窗口大小,但必须将文本框固定在一个非常特定的位置。

请参阅随附的 HTML/CSS。我希望“名字”输入始终位于图像的名称行上。

HTML.....

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style1.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Test</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
</div>
<input type="text" id="firstname" name="firstname" value="fn" class="one">one</a>

</div>
</div><!--/content-->
</body>
</html>

CSS.....

html, body {
height: 100%;
}

#block{ float:left; width:100%; max-width: 1000px; min-width: 600px; position: relative; }

#content{
height: 100%;
min-height: 100%;
}

#block img {
max-width: 100%;
display: inline-block;
}

input.one{ position: absolute; top:15%; left:12%; display:block; background:rgba(0,255,0,0.5);}

帮助!

最佳答案

试试下面的。

input.one{ 
position:absolute;
top:16.5%;
left:12%;
display:block;
background:rgba(0,255,0,0.5);
max-width:30%;
min-width:50px;
max-height:100px;
min-height:1.7%;
}

我已经用 IE8 测试过了。检查它是否满足您的要求。希望它有效。

关于html - anchor 文本输入到图像上的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23773783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com