html搜索框和logo怎么在一行

可以使用CSS的`display: flex`属性来实现搜索框和logo在同一行显示。具体实现方法如下所示：

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;
  justify-content: space-between;
}

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

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

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

这段代码将logo和搜索框都包含在一个`header`标签中，并对`header`设置`display: flex`属性，这样它们就可以在同一行显示了。`align-items`和`justify-content`属性用来控制它们的对齐方式和间距。`logo`和`search-box`都是`div`标签，`search-box`还包含了一个`input`和一个`button`标签，这些标签的样式可以根据实际需求进行调整。