Question

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

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

请参阅随附的HTML / CSS。我想要＆＃34;名字＆＃34;输入到ALWAYS位于图像的名称行。

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);}

帮助！

Answer 1

尝试使用以下内容。

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对此进行了测试。检查它是否符合您的要求。希望它有效。

Answer 2

实际上，我不喜欢你的方法使用图像并将html元素置于其上。但是，让我们尝试一下。

        <div style="width:800px">
            <img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
        </div>

并更改此css：

input.one {
position: absolute;
top: 163px;
left: 100px;
display: block;
background: rgba(0,255,0,0.5);
}

Answer 3

试试这个：Fiddle

通过使用基于百分比的padding-bottom来实现文本输入中的响应高度，解决了该问题。

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;
  position: absolute;
  top: 0;
     bottom: 0;
    left: 0;
    right: 0;
}

input.one{  
    height: 0;
    padding-bottom: 2%;
     position: relative; 
    top:15%; 
    left:12%; 
    display:block; 
    background:rgba(0,255,0,0.5);
}
#top-spacer {
     display: block;
     content: "Hello";
     padding-bottom: 21%;
     position: relative;
     width: 100%;
     clear: both;
}



 <div id="content">
          <div id="block">
                <img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
                    <div id ='top-spacer'></div>
            <input type="text" id="firstname" name="firstname" value="fn" class="one">

        </div>
    </div><!--/content-->

将文本输入锚定到图像上的行

3 个答案: