我想将文本输入框锚定到图像上的确切位置。我可以用 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/