Html 将选择框和按钮堆叠在一起

因此，我希望在调整窗口大小时，选择框和按钮保持居中并相互堆叠（但在整个窗口中保持这样）。然而，我被困在引导类中，正如您在示例中看到的，它并没有像预期的那样工作

代码笔：

编辑：已解决-我提出了以下解决方案：

有什么办法让它工作吗

.search{
背景：url（“../img/pattern.png”）；
宽度：100%；
文本对齐：居中；
身高：215px；
}
.search\u区域{
边框：1px实心#ccc；
宽度：250px；
溢出：隐藏；
背景：#fafafaurl（“../img/arrowdown.png”）无重复90%50%；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
右边距：30px；
}
.搜索\区域选择{
填充：10px 18px；
高度：55px；
宽度：130%；
边界：无；
盒影：无；
背景：透明；
背景图像：无；
-webkit外观：无；
}
.输入组{
保证金：0自动；
}
.search\u区域--按钮{
填充：16px 0px；
背景颜色：绿色；
字体大小：16px；
字体大小：粗体；
边界：无；
颜色：白色；
宽度：200px；
}

搜索某物
一个
两个
三
按钮
移除
。向左拉
和
。向右拉
使用
显示：flex
，并对您的样式进行一些小的更改。您可以改变按钮的宽度，当前设置为
100%

这是工作代码


.search{
背景：url（“../img/pattern.png”）；
宽度：100%；
文本对齐：居中；
身高：215px；
}
.search\u区域{
边框：1px实心#ccc；
宽度：100%；
溢出：隐藏；
背景：#fafafaurl（“../img/arrowdown.png”）无重复90%50%；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
/*右边距：30px*/
}
.搜索\区域选择{
填充：10px 18px；
高度：55px；
宽度：130%；
边界：无；
盒影：无；
背景：透明；
背景图像：无；
-webkit外观：无；
}
.输入组{
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：250px；
}
.search\u区域--按钮{
填充：16px 0px；
背景颜色：绿色；
字体大小：16px；
字体大小：粗体；
边界：无；
颜色：白色；
宽度：250px；
}

搜索某物
一个
两个
三
按钮

.search{
背景：url（“../img/pattern.png”）；
宽度：100%；
文本对齐：居中；
身高：215px；
}
.search\u区域{
边框：1px实心#ccc；
宽度：250px；
溢出：隐藏；
背景：#fafafaurl（“../img/arrowdown.png”）无重复90%50%；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
保证金：0自动；
边缘底部：10px；
}
.搜索\区域选择{
填充：10px 18px；
高度：55px；
宽度：130%；
边界：无；
盒影：无；
背景：透明；
背景图像：无；
-webkit外观：无；
}
.输入组{
保证金：0自动；
}
.search\u区域--按钮{
填充：16px 0px；
背景颜色：绿色；
字体大小：16px；
字体大小：粗体；
边界：无；
颜色：白色；
宽度：200px；
}

搜索某物
一个
两个
三
按钮
因为您使用的是引导，所以您必须遵循此代码


。搜索\区域选择{
背景图像：无；
-webkit外观：无；
高度：55px！重要；
边界半径：0！重要；
}
.search\u区域--按钮{
填充：16px 0px；
背景颜色：绿色；
字体大小：16px；
字体大小：粗体；
边界：无；
颜色：白色；
宽度：200px；
}
.dropdown.dropdown-lg.下拉菜单{
页边顶部：-1px；
填充：6px 20px；
}
.input group btn.btn group{
显示：flex！重要；
}
.btn组.btn{
边界半径：0；
左边距：-1px；
}
.btn组.btn:最后一个子级{
边框右上角半径：4px；
边框右下半径：4px；
}
.btn group.form horizontal.btn[type=“submit”]{
边框左上半径：4px；
边框左下半径：4px；
}
.表格水平.表格组{
左边距：0；
右边距：0；
}
.窗体组.窗体控件：最后一个子项{
边框左上半径：4px；
边框左下半径：4px；
}
@媒体屏幕和屏幕（最小宽度：768px）{
#高级搜索{
宽度：500px；
保证金：0自动；
}
.dropdown.dropdown-lg{
位置：静态！重要；
}
.dropdown.dropdown-lg.下拉菜单{
最小宽度：500px；
}
}

搜索某物
一个
两个
三
按钮
我想出的解决方案-链接：

.search{
背景：url（“../img/pattern.png”）；
宽度：100%；
高度：自动；
}
.搜索h1{
文本对齐：居中；
边缘顶部：30px；
}
.搜索内容{
最大宽度：480px；
保证金：0自动；
填充：30px 0px；
}
.search\u区域{
边框：1px实心#ccc；
宽度：250px；
溢出：隐藏；
背景：#fafafaurl（“../img/arrowdown.png”）无重复90%50%；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
浮动：左；
}
.搜索\区域选择{
填充：10px 18px；
高度：55px；
宽度：100%；
边界：无；
盒影：无；
背景：透明；
光标：指针；
}
.search\u区域选择.option{
填充：10px 18px；
宽度：100%；
}
挑选{
-webkit外观：无；
-moz外观：无；
外观：无；
}
@媒体屏幕和屏幕（最大宽度：
.search {
  background: url("../img/pattern.png");
  width: 100%;
  height: auto;
}

.search h1 {
  text-align: center;
  margin-top: 30px;
}

.search__content {
  max-width: 480px;
  margin: 0 auto;
  padding: 30px 0px;
}

.search__region {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("../img/arrowdown.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}

.search__region select {
  padding: 10px 18px;
  height: 55px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}

.search__region select .option {
  padding: 10px 18px;
  width: 100%;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media screen and(max-width: 768px) {
  .search h1 {
    font-size: 20px;
    margin: 20px 0px;
  }
  .search__content {
    margin-top: -20px;
  }
  .search__content .search__region {
    width: 100%;
  }
  .search__content .search__region--button {
    width: 100%;
    margin-left: 0px;
    margin-top: 10px;
  }
}

.search__region--button {
  padding: 16px 0px;
  background-color: green;
  font-size: 16px;
  font-weight: bold;
  border: none;
  color: white;
  width: 200px;
  float: left;
  margin-left: 25px;
  margin-bottom: 30px;
}

<div class="container search">
  <div class="search__content">
    <div class="search__region">
      <select>
                <option value="" class="option">Choose something</option>
                <option value="" class="option">One</option>
                <option value="" class="option">Two</option>
                <option value="" class="option">Three</option>
              </select>
    </div>
    <button class="search__region--button">button</button>
  </div>
  <!-- end search__content -->
</div>
<!-- end search container -->