Question

我需要在输入元素上放置一个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')

Answer 1

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

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

Answer 2

在这种情况下，input元素和question market元素是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）而不是输入元素的元素。

在输入元素上定位div

2 个答案: