Выровнять кнопку по правому краю формы
Я пытаюсь разместить расположенную ниже кнопку «Войти» в правой части формы входа, но по какой-то причине не могу этого добиться.
Как я хочу, чтобы это выглядело:
Как это выглядит на данный момент:
Как выглядит мой код интерфейса:
<RuxContainer className = "container">
<div slot = "header" className = "header-container">
<h3 className = "first-header-item">LOGO</h3>
<RuxClock timezone = "Z"></RuxClock>
<RuxMonitoringIcon status = "normal"></RuxMonitoringIcon>
</div>
<div className = "body-container">
<form className = "rux-form">
<h2 className = "body-sign-in">SIGN IN</h2>
<h6>Measure your success in the Space Force!</h6>
<div className = "sign-in-inputs">
<rux-input
id = "email"
placeholder = "[email protected]"
label = "Email"
type = "email"
ruxblur = "{handleValidation()}"
></rux-input>
<rux-input id = "pw" label = "Password" type = "password"></rux-input>
</div>
<div className = "sign-in-helper-functions">
<rux-checkbox class = "checkbox">Remember me</rux-checkbox>
<h2 className = "forgot-password">Forgot Password?</h2>
</div>
</form>
<rux-button className = "sign-in-btn" type = "submit">
Sign in
</rux-button>
</div>
</RuxContainer>
Как выглядит мой CSS:
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.body-container {
display: flex;
flex-direction: column;
align-items: center;
}
.rux-form {
width: 30%;
max-width: 430px;
}
sign-in-btn {
align-self: flex-end;
}
Я новичок в CSS, поэтому буду очень признателен за любую помощь, спасибо!
все еще ничего не изменилось
Хорошо, я также привел ваш код в порядок, чтобы он был ближе к реальному коду внешнего интерфейса, поэтому я разместил свой тестовый код ниже, чтобы показать, что я имею в виду.
нет, твой код не работает
Вы пробовали плавать: верно?
да, Джеймс Б. нашел для меня решение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
На самом деле это не «код интерфейса», поскольку он не работает в браузере. Если вы немного приведёте его в порядок и добавите . перед sign-in-btn, это сработает:
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.body-container {
display: flex;
flex-direction: column;
align-items: center;
}
.form {
width: 30%;
max-width: 430px;
}
.sign-in-btn {
align-self: flex-end;
}<RuxContainer class = "container">
<div slot = "header" class = "header-container">
<h3 class = "first-header-item">LOGO</h3>
<RuxClock timezone = "Z"></RuxClock>
<RuxMonitoringIcon status = "normal"></RuxMonitoringIcon>
</div>
<div class = "body-container">
<form class = "form">
<h2 class = "body-sign-in">SIGN IN</h2>
<h6>Measure your success in the Space Force!</h6>
<div class = "sign-in-inputs">
<input
id = "email"
placeholder = "[email protected]"
label = "Email"
type = "email"
ruxblur = "{handleValidation()}"
></input>
<input id = "pw" label = "Password" type = "password"></input>
</div>
<div class = "sign-in-helper-functions">
<checkbox class = "checkbox">Remember me</checkbox>
<h2 class = "forgot-password">Forgot Password?</h2>
</div>
</form>
<button class = "sign-in-btn" type = "submit">
Sign in
</button>
</div>
</RuxContainer>это не совсем то, что я хочу, пожалуйста, посмотрите на дизайн-изображение Figma того, что я хочу
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.body-container {
display: flex;
flex-direction: column;
align-items: center;
}
.form {
width: 30%;
max-width: 430px;
}
.btn {
display: flex;
justify-content:end
}<RuxContainer class = "container">
<div slot = "header" class = "header-container">
<h3 class = "first-header-item">LOGO</h3>
<RuxClock timezone = "Z"></RuxClock>
<RuxMonitoringIcon status = "normal"></RuxMonitoringIcon>
</div>
<div class = "body-container">
<form class = "form">
<h2 class = "body-sign-in">SIGN IN</h2>
<h6>Measure your success in the Space Force!</h6>
<div class = "sign-in-inputs">
<input
id = "email"
placeholder = "[email protected]"
label = "Email"
type = "email"
ruxblur = "{handleValidation()}"
></input>
<input id = "pw" label = "Password" type = "password"></input>
</div>
<div class = "sign-in-helper-functions">
<checkbox class = "checkbox">Remember me</checkbox>
<h2 class = "forgot-password">Forgot Password?</h2>
</div>
<div class = "btn">
<button class = "sign-in-btn" type = "submit">
Sign in
</button>
</div>
</form>
</div>
</RuxContainer>Ответы должны содержать пояснения. Пожалуйста, посмотрите Как ответить и посетите тур.
Этот ответ не похож на дизайн Figma, который я опубликовал выше. Пожалуйста, просмотрите прикрепленные изображения, прежде чем спешить что-то публиковать, чтобы получить баллы...
Проблема
Ваш rux-button.sign-in-btn является дочерним элементом элемента .body-container, который использует flex-box для выравнивания формы по центру. Следовательно, когда ваш CSS выравнивает до конца, выравнивание выполняется на основе родительского элемента: .body-container.
Решение
Сделайте ваш элемент <form> также контейнером flexbox, и тогда align-self: end должен вести себя с кнопкой так, как ожидалось.
Подобная вложенность элементов контейнера flexbox совершенно нормальна.
Стиль
.rux-form {
width: 30%;
max-width: 430px;
display: flex;
flex-direction: column;
}
.sign-in-btn {
align-self: end;
}
Разметка
<form className = "rux-form">
...
<rux-button className = "sign-in-btn" type = "submit">
Sign in
</rux-button>
</form>
Альтернативный вариант, если вы предпочитаете не использовать display: flex в самой форме, — создать контейнер flexbox, занимающий всю ширину формы, у которого кнопка является дочерней, а затем вы можете выровнять кнопку справа по отношению к этому контейнеру. - который имеет ширину формы.
Стиль
div.sign-in-container {
display: flex;
justify-content: end;
width: 100%;
}
Разметка
<form className = "rux-form">
...
<div class = "sign-in-container">
<rux-button type = "submit">Sign in</rux-button>
</div>
</form>
Дополнительный
Поскольку вы просили дополнительный совет по CSS, обратите внимание, что эту стратегию вложенного контейнера flexbox также можно использовать для выравнивания элементов управления «Запомнить меня» и «Забыли пароль».
.sign-in-helper-functions {
display: flex;
justify-content: space-between;
}
Вы можете использовать:
align-self : end;
или вы можете использовать:
left-margin : auto;
right-margin : 0;
Вам нужен
.перед именем класса кнопки:.sign-in-btn {align-self: flex-end;}.