无法让 float:right 正确处理所有元素

Question

我当然不是 css 大师，但我认为这会很容易。可悲的是，我无法让它工作。我的代码是：

<div class="form-group" style="float:right;">
     <p><asp:Button ID="Submit" Text="Login" Visible="true" Enabled="True" CssClass="btn btn-green btn-lg" OnCommand="Login" runat="server" /></p>
     <p><a href="/ForgotPW.aspx">Forgot your password?</a></p>
     <p><asp:Label ID="SuccessMessage" Text="Thank you! Your request was successfully sent." ForeColor="Green" Visible="False" runat="server"></asp:Label></p>
</div>

看起来像这样：

如红色箭头所示，我需要它与 div 的右侧对齐，就像那里的其他元素一样。

备注：

唯一应用于 "form-group" 的 css 是 margin-bottom: 15px;
如果我将 float:right 直接应用到按钮上，它会起作用，但是 "Forgot your password?" link 会向上移动到按钮的旁边和左侧，我什么也做不了让它移动到按钮下方。好郁闷

Answer 1

将 float: right; 放在按钮上，然后将 clear: both; 或 display: block; 放在 link 上以将其强制到下一行。

Answer 2

段落使用text-align:right DEMO

input {
  width: 90%;
}
form {
  width: 300px;
  border: 1px solid black;
  height: 300px;
}
form > div {
  width: 100%;
  text-align: center;
}
.form-group > p {
  text-align: right;
}

<form>
  <div>
    <p>Username</p>
    <p>
      <input type="text" />
    </p>
  </div>
  <div>
    <p>Password</p>
    <p>
      <input type="text" />
    </p>
  </div>
  <div class="form-group">
    <p>
      <button ID="Submit">Login</button>
    </p>
    <p><a href="/ForgotPW.aspx">Forgot your password?</a>
    </p>
    <p>Thank you! Your request was successfully sent.</p>
  </div>
</form>

无法让 float:right 正确处理所有元素

Can't get float:right to work on all elements properly

html

css

asp.net

css-float