.search-form { position: absolute; top: 30%; left: 50px; display: flex; justify-content: center; align-items: center; } .search-input { width: 65%; /* 设置搜索框的宽度 */ background-color: #d28186; /* 设置搜索框的背景颜色 */ border: none; /* 移除搜索框的边框 */ padding: 10px; /* 设置搜索框的内边距 */ font-size: 16px; /* 设置搜索框的字体大小 */ border-radius: 10px 0 0 10px; } .search-button { background-color: #b23d41; /* 设置按钮的背景颜色 */ color: rgb(240, 235, 235); /* 设置按钮的文字颜色 */ border: none; /* 移除按钮的边框 */ padding: 10px 20px; /* 设置按钮的内边距 */ font-size: 1vw; /* 设置按钮的字体大小 */ border-radius: 0 10px 10px 0; } .search-input .search-button{ height: 20px; }如何更改搜索框长度

要更改搜索框的长度，你可以调整`.search-input`类的`width`属性的值。在给定的代码中，搜索框的宽度被设置为`65%`，你可以根据需要增加或减少这个百分比值来改变搜索框的长度。

例如，如果你想要搜索框更宽一些，可以将`width`的值增加到`75%`：

.search-input {
  width: 75%;
  /* 其他样式属性 */
}

如果你想要搜索框更窄一些，可以将`width`的值减小到`50%`：

.search-input {
  width: 50%;
  /* 其他样式属性 */
}

通过调整`width`属性的值，你可以灵活地改变搜索框的长度，以满足你的设计需求。记得根据具体情况调整其他样式属性，以保持整体样式的一致性。