Не могу получить поплавок: право работать на всех элементах правильно

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, как и остальные элементы в там ,

ПРИМЕЧАНИЕ:

• только CSS, применяемое к "формам-группе" край дно: 15px;
• если я применяю поплавок: прямо на кнопку, он работает, но затем «Забыли пароль?». ссылка перемещается вверх и слева от кнопки, и ничто, что я делаю, не может заставить ее двигаться ниже кнопки. Настолько разочаровывающе.

Answer 1

Положите float: right; на кнопку, а затем положить clear: both; или display: block; на ссылку, чтобы заставить его на следующую строку.

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>