一个窗体中有多个按钮

Question

我在一个form中有3个buttons，我想更改button的顺序-将最后一个显示为第一个。

我只是想自定义一个网站的外观，通过使用市场建设者Sharetrib。自定义选项有限，我只能添加自定义脚本。

以下是网站和列表页面上的按钮。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>

Answer 1

您可以尝试将两个按钮的位置设置为相对位置，然后移动元素：

请求按钮：

{
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;
}

Answer 2

简单地对元素进行重新排序会有所帮助。

<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>