左侧下拉右侧搜索框样式

以下是一个左侧下拉右侧搜索框样式的示例，供您参考：

HTML 代码：

<div class="search-box">
  <div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
    <ul class="dropdown-menu">
      <li><a href="#">菜单项 1</a></li>
      <li><a href="#">菜单项 2</a></li>
      <li><a href="#">菜单项 3</a></li>
    </ul>
  </div>
  <div class="search-input">
    <input type="text" placeholder="搜索...">
    <button type="submit">搜索</button>
  </div>
</div>

CSS 代码：

.search-box {
  display: flex;
  align-items: center;
}

.dropdown {
  position: relative;
  margin-right: 20px;
}

.dropdown-toggle {
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown-menu li {
  padding: 8px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f2f2f2;
}

.search-input {
  display: flex;
  align-items: center;
}

.search-input input[type="text"] {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.search-input button[type="submit"] {
  padding: 8px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.search-input button[type="submit"]:hover {
  background-color: #0069d9;
}

说明：

- `.search-box` 使用 `display: flex;` 使下拉菜单和搜索框在同一行并垂直居中对齐。
- `.dropdown` 样式设置下拉菜单的样式。
- `.dropdown-toggle` 样式设置下拉菜单的切换按钮样式。
- `.dropdown-menu` 样式设置下拉菜单的样式。
- `position: absolute;`、`top: 100%;`、`left: 0;` 使下拉菜单相对于 `.dropdown` 的底部左对齐。
- `.search-input` 使用 `display: flex;` 使搜索框中的输入框和按钮在同一行。
- `.search-input input[type="text"]` 样式设置搜索框中的输入框样式。
- `.search-input button[type="submit"]` 样式设置搜索框中的按钮样式。
- `border-radius` 属性设置圆角。注意，下拉菜单的左下角和搜索框的左边框需要设置成圆角，以便它们看起来像一个整体。