Несколько кнопок в одной форме - PullRequest
Новая
       28

Несколько кнопок в одной форме

0 голосов
/ 22 октября 2019

У меня есть 3 buttons в одном form, и я хотел бы изменить порядок button с - отображать последний как первый.

Я просто пытаюсь настроить внешний вид сайта, созданного с помощью Marketplace Builder Sharetribe. Параметры настройки ограничены, я могу только добавлять собственные сценарии.

Вот сайт и кнопки на странице со списком. https://rentim.sharetribe.com/en/listings/841589-karl-plumber 

<form id="booking-dates" action="/en/transactions/new?listing_id=841589" accept-charset="UTF-8" method="get" novalidate="novalidate">
  <input name="utf8" type="hidden" value="✓">
  <div class="quantity-wrapper input-group clearfix">
    <div class="quantity-label-wrapper">
      <label class="quantity-label" for="quantity">Number of hours:</label>
      <input type="hidden" name="listing_id" id="listing_id" value="841589">
      <button class="enabled-book-button">
          <div class="content">Avaliablity and reservation</div>        </button>
      <button class="enabled-book-button">
          <div class="content">Buy hourly work</div>
       </button>
      <button class="enabled-book-button">
        <div class="content">Request</div></button>
</form>

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Вы можете попробовать установить положение двух кнопок относительно и затем переместить элементы:

Кнопка запроса: 

{
  position: relative;
  top: -132px;
}

Кнопка доступности и резервирования: 

{
  position: relative;
  top: 103px;
}

ИЛИ используя flex! 

#booking-dates { // form element
  display: flex;
  flex-direction: column;
}

.enabled-book-button { // request button
  order: -1;
}
0 голосов
/ 22 октября 2019

Поможет просто изменить порядок элементов. 

<button class="enabled-book-button">
<div class="content">Request</div></button>
<input type="hidden" name="listing_id" id="listing_id" value="841589">
<button class="enabled-book-button">
<div class="content">Avaliablity and reservation</div></button>
<button class="enabled-book-button">
<div class="content">Buy hourly work</div></button>
...