Как разместить кнопку отправки внизу слева относительно моей формы?

Моя форма расположена по центру, и я хотел бы разместить кнопку отправки в левом нижнем углу моей формы. Как мне это сделать?

Мой текущий код:

.bio {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.send {
  display: block;
  margin-left: 0;
}

<form>
  <input type = "text" class = "bio">
  <input type = "submit" class = "send" value = "Send">
</form>

Вот что я хочу в принципе.

используйте текстовую область для .bio, если это должен быть длинный текст и разрывы строк

— 13.12.2020 19:42

html css layout alignment

13.12.2020 19:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

110

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вместо этого отцентрируйте form, вот так:

.form {
    margin: 0 auto;
    width: 400px;
}

.bio {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    background-color: #eee;
    border: none;
    border-radius: 4px;
    height: 120px;
    resize: none;
    padding: 8px;
}

.send {
    border-radius: 4px;
    background-color: red;
    color: white;
    border: none;
    padding: 4px 16px;
}

<form class = "form">
<textarea class = "bio" placeholder = "Text...">
</textarea>
<input type = "submit" class = "send" value = "Send">
</form>

13.12.2020 19:45

Попробуй это :

.bio{
display: block;
margin-left: 0;
margin-right: auto;
}

.send{
display: block;
margin-left: 0;
}

13.12.2020 19:48

Поместите кнопку отправки за пределы формы, но ссылайтесь на форму, используя свойство формы I'd.


<div>

<form action = "..." method = "..." Id = "form-id">
.
.
.
</form>
  <button type = "submit" form = "form-id">Submit</button>

</div>

13.12.2020 19:56

Другие вопросы по теме

Есть ли способ редактировать отдельные экземпляры класса в CSS?

Увеличьте высоту дочернего div до высоты его родительского div

Как заставить это изображение выровняться по центру только с помощью CSS?

Bootstrap блок со 100% высотой

Программирование "Live-Coder"

Увеличьте высоту относительного <div>, чтобы соответствовать абсолютной высоте дочерних элементов <div>

Проблема с вложенной встроенной сеткой CSS Grid

Коробка, которая раскрывается в галерее

Как я могу добавить шрифт Hinglish в HTML?

Форма оверлея Bootstrap spinner (не вся страница)

Как разместить кнопку отправки внизу слева относительно моей формы?

Ответы 3

Другие вопросы по теме

Похожие вопросы