无法浮动：正确处理所有元素

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的右侧对齐，就像那里的其他元素一样。

注意：

• 唯一适用于＆＃34; form-group＆＃34;是保证金底部：15px;
• 如果我将浮动：直接应用于按钮，它可以正常工作，但是＆＃34;忘记密码？＆＃34;链接向上移动到按钮的左侧和左侧，我所做的一切都不能让它移动到按钮下方。太令人沮丧了。

Answer 1

将float: right;放在按钮上，然后将clear: both;或display: block;放在链接上，以强制它进入下一行。

Answer 2

使用text-align:right作为段落 DEMO

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;