制作带有内联按钮的表单

Question

我有 2 个按钮和一个其中包含输入类型的表单。我希望它们全部都是内联的，但我做不到。

这就是我所拥有的：

.btn-registerLayout {
  background-color: #425fab;
  font-size: 10px;
  outline: none;
  text-align: left;
  cursor: pointer;
  height: 22px !important;
  width: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn {
  color: #fff !important;
}


/* Search Section*/

.header-search .header-search-box {
  position: relative;
  width: 100%;
}

.header-search-input {
  width: 100%;
  background: #f0f0f0;
  font-size: 12px;
  height: 20px;
  transition: .2s;
  color: darkgreen;
  outline: none;
  display: inline;
  border: 1px solid red !important;
  position: relative;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-inline pl-5" style="float:left">

  <div class="d-inline">
    <form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
      <input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
    </form>
  </div>
  <button class="btn btn-registerLayout d-inline" style="width:28px !important">
                        <i class="ml-2 bi bi-person-plus-fill"></i>
                    </button>
  <button class="btn btn-registerLayout d-inline">
                        <i class="ml-2 bi bi-box-arrow-in-right"></i><span style="padding-left:5px"> Login</span>
                    </button>
</div>

但我无法使表单与按钮内联，结果如下：

Answer 1

在父级上添加 d-inline-flex 以使元素内联，然后您可以使用间隔符或 ml 来分隔输入中的按钮。

.btn-registerLayout {
  background-color: #425fab;
  font-size: 10px;
  outline: none;
  text-align: left;
  cursor: pointer;
  height: 22px !important;
  width: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn {
  color: #fff !important;
}


/* Search Section*/

.header-search .header-search-box {
  position: relative;
  width: 100%;
}

.header-search-input {
  width: 100%;
  background: #f0f0f0;
  font-size: 12px;
  height: 20px;
  transition: .2s;
  color: darkgreen;
  outline: none;
  display: inline;
  border: 1px solid red !important;
  position: relative;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-inline-flex pl-5">

  <div class="d-inline-block mx-auto">
    <form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
      <input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
    </form>
  </div>
  <button class="btn btn-registerLayout d-inline ml-2" style="width:28px !important">
                        <i class="bi bi-person-plus-fill"></i>
                    </button>
  <button class="btn btn-registerLayout d-inline ml-2">
                        <i class="bi bi-box-arrow-in-right"></i><span> Login</span>
                    </button>
</div>

Answer 2

.btn-registerLayout {
  background-color: #425fab;
  font-size: 10px;
  cursor: pointer;
}

.btn {
  color: #fff !important;
}

/* Search Section*/

.header-search .header-search-box {
  position: relative;
  width: 100%;
}

.header-search-input {
  width: 100%;
  background: #f0f0f0;
  font-size: 12px;
  height: 20px;
  transition: .2s;
  color: darkgreen;
  outline: none;
  display: inline;
  border: 1px solid red !important;
  position: relative;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div class="d-inline pl-5" style="float:left">

  <div class="d-inline">
    <form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
      <input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
    </form>
  </div>
  
  <div class="btn-wrap"><button class="btn btn-registerLayout d-inline">
      <span>Login<i class="ml-2 bi bi-box-arrow-in-right"></i></span>
  </button>
    <button class="btn btn-registerLayout d-inline">
      <i class="ml-1 bi bi-person-plus-fill"></i>
  </button>
  </div>
  
  
  </div>

</div>

像某种包装器中的分组按钮总是效果更好一些。