html搜索框和logo怎么在一行

可以使用CSS的flex布局或者float属性来实现搜索框和logo在一行显示。以下是两种实现方法：

使用flex布局：

HTML代码：

<div class="header">
  <div class="logo">
    <img src="logo.png" alt="logo">
  </div>
  <div class="search-box">
    <input type="text" placeholder="搜索...">
    <button>搜索</button>
  </div>
</div>

CSS代码：

.header {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 10px;
}

.logo img {
  width: 100px;
  height: auto;
}

.search-box input[type="text"] {
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  padding: 5px;
  margin-right: 10px;
}

.search-box button {
  width: 60px;
  height: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

使用float属性：

HTML代码：

<div class="header">
  <div class="logo">
    <img src="logo.png" alt="logo">
  </div>
  <div class="search-box">
    <input type="text" placeholder="搜索...">
    <button>搜索</button>
  </div>
</div>

CSS代码：

.logo {
  float: left;
  margin-right: 10px;
}

.search-box {
  float: left;
}

.search-box input[type="text"] {
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  padding: 5px;
  margin-right: 10px;
}

.search-box button {
  width: 60px;
  height: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

使用flex布局，将`header`容器设置为`display: flex`，并使用`align-items: center`将子元素垂直居中对齐。然后将`logo`和`search-box`两个子元素设置为`display: inline-block`，这样它们就可以在同一行显示了。注意给`logo`元素设置一些`margin-right`的间距，以保持与`search-box`之间的距离。

使用float属性，将`logo`元素的`float`属性设置为`left`，将`search-box`元素的`float`属性设置为`left`，这样它们就可以左右对齐在同一行了。同样需要给`logo`元素设置一些`margin-right`的间距，以保持与`search-box`之间的距离。