Блог

Главная - Вопросы по программированию - Поместите кнопку внутри формы ввода с помощью гибкого

Поместите кнопку внутри формы ввода с помощью гибкого

#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>
Метки: