#html #css #forms #input #flexbox
Вопрос:
Мне удалось получить форму, которую я хочу, чтобы кнопка была помещена внутри формы ввода, но когда размер экрана становится меньше, форма и кнопка не накладываются друг на друга, как если бы кнопка не была помещена внутри формы.
В принципе, я хочу, чтобы кнопка внутри формы находилась на рабочем столе и была сложена друг на друга для мобильных устройств. Есть какие-нибудь идеи? Если я изменю положение кнопки на относительное, то ее нельзя будет разместить в форме
Изображение формы на рабочем столе
Изображение формы на мобильном устройстве
.button {
font-size: 16px !important;
border-radius: 50px !important;
position: absolute;
margin-right: 5px !important;
}
#form {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
}
@media (max-width: 800px) {
#url-25 {
flex-direction: column !important;
align-items: stretch;
width: 100% !important;
padding: 0 20px !important;
}
}
<form id="form">
<input type="text" name="name" placeholder="text">
<input type="submit" value="BUILD YOUR APP"></input>
</form>
Ответ №1:
Я изменил некоторые свойства в вашем коде в соответствии с вашими требованиями. Проверьте фрагмент ниже. Кнопка будет находиться внутри ввода на рабочем столе, и она будет размещена в мобильном устройстве (менее 567 пикселей).
И несколько изменений, которые я внес в ваш код, включают:
- Был стиль, для
.button
которого не было - Был стиль, для
#url-25
которого тоже не существовало. - Ввод отправить изменен на кнопку отправить.
- Удалены ненужные
!important
s.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
#form {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
position: relative;
}
button {
font-size: 16px;
border-radius: 50px;
position: absolute;
padding: 10px;
right: 0;
height: 100%;
}
input {
width: 100%;
border-radius: 50px;
padding: 10px;
}
input:focus {
outline: none;
box-shadow: none;
border: 0;
}
@media (max-width: 567px) {
#form {
flex-direction: column;
}
button, input {
position: static;
width: 100%;
border-radius: 0;
}
}
<form id="form">
<input type="text" name="name" placeholder="text">
<button type="submit">BUILD YOUR APP</button>
</form>
Комментарии:
1. О, мои извинения! Забыл удалить не относящийся к делу идентификатор. Похоже, он работает, когда размер экрана меньше, но не распознает гибкий конец в браузере safari. Кроме того, при укладке куда бы я добавил отступ, чтобы при укладке между формой и кнопкой оставалось немного места?
2. Где вы используете
flex-end
. ?3. Извините, оправдайте содержание: конец. Кнопка отображается с левой стороны в safari. Отлично смотрится в других браузерах
4. Так и должно быть
flex-end
, в том фрагменте, который естьend
. Можешь попробовать и дать мне знать ? Я тоже обновлю фрагмент5. Я пробовал использовать различные методы webkit, но безрезультатно. Это должно быть распознано на Сафари. Мысли?
Ответ №2:
Пара комментариев здесь.
В медиа-запросе есть url-25, но в данном коде нет идентификатора url-25, и ничто не изменяет макет #формы при изменении размера носителя.
Кроме того, в медиа-запросе есть несколько важных!, которые, по-видимому, не имеют функции, по крайней мере, учитывая код в вопросе.
<style>
.button{
font-size: 16px !important;
border-radius: 50px !important;
position: absolute;
margin-right: 5px !important;
}
#form{
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
}
@media (max-width: 800px) {
#form{
flex-direction: column;
align-items: stretch;
width: 100%;
padding: 0 20px;
}
}
</style>
<form id="form">
<input type="text" name="name" placeholder="text">
<input type="submit" value="BUILD YOUR APP"></input>
</form>