1

我需要在输入元素上放置一个 div。例如。

https://www.tumblr.com/login

如果您查看密码输入元素，有一个“？” 在右侧。

什么是正确的解决方案？

我试图用绝对对着身体来定位它，但效果不好。

我想定位“？” 相对于输入元素作为其包含的 div 但我不能使输入元素成为“？”的父 div 由于某些原因。

请帮忙。

代码：

  div.login
    form#login-form(autocomplete="on", method='post', action='/login')
      div.form-row
        label(for="login_email")
        input#login_email(type="email" , data-required="required", placeholder="Email", name="user[email]")
      div.form-row
        label(for="login_password")
        input#login_password(type="password" , data-required="required", placeholder="Password", name="user[password]")
          div.forgot(style='float:right;border:1px solid red;') forgot
      input.login-btn.btn-account(type='submit', value='Log in')
4

2 回答 2

2

我会做div.form-row position:relative和div.forgot position:absolute;right:10px;top:8px;

这将绝对定位忘记或“？” 自身相对于输入字段的父容器。您将需要进一步调整它，但这应该会让您朝着正确的方向前进。

于 2013-08-11T20:46:52.030 回答
1

在这种情况下，输入元素和问题市场元素在具有 class 的 div 元素中作为父元素form_row：

    <div class="form_row form_row_password">
         <label for="signup_password">Password</label>
         <input type="password" name="user[password]" placeholder="Password" id="signup_password" data-required="required">
         <a href="/forgot_password" class="forgot_password_link" target="_new">Password help<b class="question_mark">?</b></a>
    </div>

因此，父 div 的类form_row是position:relative;，那么输入元素 AND<a>元素就在其中。该<a>元素是唯一一个position:absolute相对于其父元素、容器 div 而不是输入元素的元素。

于 2013-08-11T20:48:15.417 回答