html - 如何在 Google map 上方使用 Bootstrap 定位内联文本框和按钮？

Question

我需要将文本框和按钮置于内联位置，这是正确的。但是当我尝试不同的 View 示例平板电脑时，文本框适合但按钮留在原位。请看图片。

<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

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

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