Блог

Главная - Вопросы по программированию - Как заставить кнопку отправки формы находиться на следующей строке css?

Как заставить кнопку отправки формы находиться на следующей строке css?

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

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

HTML

 .SearchBar-fields {
  display: flex;
  justify-content: center;
  margin-bottom: 2.88rem;
  flex-direction: row;
  flex-wrap: wrap;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  align-self: stretch;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}


.SearchBar-submit button {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
  flex-direction: column;
  min-width: 100%;
} 
 <form className="SearchBar-fields" onSubmit = {handleSearch}>
    <input placeholder="Search Businesses" onChange = {handleTermChange} required/>
    <input placeholder="Where?" onChange = {hanldeLocationChange} required />
    <div className="SearchBar-submit">
        <button >Let's Go</button>
    </div>
</form>

Ответ №1:

ОБНОВИТЬ ДВА СПОСОБА СДЕЛАТЬ ЭТО:

Основная проблема, с которой вы сталкиваетесь, заключается в том, что элемент формы, который занимает всю ширину контейнера, является block-level element .

1. Используйте дополнительную оболочку div вокруг ваших входных данных и установите display:flex; в вашей оболочке.

 .SearchBar-fields{
  display: inline-flex;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
}

.SearchBar-submit {
  text-align:center;
}
.SearchBar-submit button {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
  margin-top:1rem;
} 
 <form class="SearchBar-fields" onSubmit = {handleSearch}>
    <div class="inner-wrapper">
     <input placeholder="Search Businesses" onChange = {handleTermChange} required/>
     <input placeholder="Where?" onChange = {hanldeLocationChange} required />
     <div>
    <div class="SearchBar-submit">
        <button >Let's Go</button>
    </div>
</form>

Я исправил эту проблему, используя display:flex; on form и используя оболочку вокруг входных данных.

2. Второй метод:

Попробуйте сделать свою .SearchBar-fields форму as display:inline-block , чтобы форма увеличивала ширину ввода только в длину.

И после этого у вас есть .SearchBar-submit div, который содержит вашу кнопку, которую вы можете просто использовать text-align:center , кнопка div и переместится в центр. Есть много других способов, но это просто и прямолинейно.

 form.SearchBar-fields {
  margin-bottom: 2.88rem;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  align-self: stretch;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}


.SearchBar-submit {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
} 
 <form className="SearchBar-fields" onSubmit = {handleSearch} style="display:inline-block">
<input placeholder="Search Businesses" onChange = {handleTermChange} required/>
<input placeholder="Where?" onChange = {hanldeLocationChange} required />
<div className="SearchBar-submit" style="text-align:center">
    <button >Let's Go</button>
</div>
</form>

Комментарии:

1. Спасибо! Небольшая «ошибка» с полями ввода, и это сработало отлично, еще раз спасибо

Ответ №2:

Используйте display: flex свойство. Если вы измените следующие фрагменты, это должно работать.

HTML

 <form className="SearchBar-fields flex flex-c " onSubmit = {handleSearch}>
    <input placeholder="Search Businesses" onChange = {handleTermChange} required/>
    <input placeholder="Where?" onChange = {hanldeLocationChange} required />
    <div className="SearchBar-submit flex content-centered">
        <button >Let's Go</button>
    </div>
</form>

css

 .SearchBar-fields {
  display: flex;
  justify-content: center;
  margin-bottom: 2.88rem;
  flex-direction: row;
  flex-wrap: wrap;
  width: 21rem;
}

.SearchBar-fields input {
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  align-self: stretch;
}

.flex {
  display: flex;
}

.flex-c {
  flex-direction: column;
}

.content-centered {
  justify-content: space-around;
}

Ответ №3:

Я бы предложил что-то вроде этого (протестировано и работает):

  <div className="fullDiv">
  <form className="SearchBar-fields">
    <div className="inputDiv">
      <input placeholder="Search Businesses" />
      <input placeholder="Where?" />
    </div>
    <div className="SearchBar-submit">
      <button>Let's Go</button>
    </div>
  </form>
 </div>

Многие проблемы с CSS, с которыми вы столкнетесь, можно легко устранить, добавив более конкретные разделы вокруг каждого уникального блока html. Это также считается правильной практикой (совет на будущее)

Ответ №4:

Оберните кнопку внутри div и передайте ее

 display: flex; justigy-content: center; min-width: 100%