如何使用Google Map上方的引导程序定位内联文本框和按钮？

Question

我需要将文本框和按钮内嵌并且这是正确的。但是，当我尝试不同的视图示例平板电脑视图时，文本框适合但按钮保持在该位置。请看图片。

<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; position: absolute; width: 30%; z-index: 1;">

<input type="button" class="btn btn-default" onclick="location.reload();" style="margin-left: 700px; width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />

<div id="map" style="position: relative;"></div>

使用这个@ chaitz9：

<input id="search" class="form-control" placeholder="Search Location" style="margin-top: 10px; width: 30%; z-index: 1; margin-left: 100px;" type="text">
<input class="btn btn-default" onclick="location.reload();" style="margin-top: 10px; z-index: 1; background-color: rgb(255, 255, 255); border: 1px solid rgb(220, 228, 236); color: rgb(44, 62, 80); width: 15%;" value="Refresh" type="button">
<div id="map" style="position: relative;"></div>

输出：

Answer 1

已编辑：尝试使用此CSS。我现在已将输入字段包装到div中，并给出了display: table的div属性。并输入字段display: table-cell

＆＃13;

＆＃13;

.loc_div{
     display: table !important;
     width:100%;
}

#search{
    margin-left: 100px;
    margin-top: 10px;
    width: 30%;
    z-index: 1;
    position:relative;
    display:table-cell;  

}

.btn {
    background-color: #ffffff;
    border: 1px solid #dce4ec;
    color: #2c3e50;
    margin-top: 10px;
    width: 20%;
    z-index: 1;
    margin-left: 10px;
    display:table-cell;
}

＆＃13;

<div class="loc_div">
  <input id="search" class="form-control" placeholder="Search Location"  type="text">
  <input class="btn btn-default" onclick="location.reload();" value="Refresh" type="button">
</div>
<div id="map" style="position: relative;"></div>

＆＃13;

＆＃13;

＆＃13;