css搜索框超过两行 |css横向导航菜单代码

.search{
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
height: 40px;
line-height: 40px;
padding: 0 10px;
width: 200px;
}
.search-submit{
background-color: #008CBA;
border: none;
border-radius:5px;
color: #fff;
cursor: pointer;
font-size: 16px;
height: 40px;
margin: 0;
padding: 0 15px;
}
.search-wrap{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.search-input{
flex: 1;
margin-right: 10px;
}

首先，大家可以将搜索按钮和输入框放在同一行，并用Flexbox布局将它们的宽度自动根据容器宽度分配。这样可以避免用户输入超过两行后搜索按钮下移的问题。

其次，大家可以在CSS中设置输入框的高度，让其在用户输入时自动适应高度。这样可以让用户更轻松地输入多行文本，而不必担心输入时超出输入框。

另外，大家可以使用圆角边框和渐变背景色来美化输入框。这可以让用户更加愉悦地在网站上搜索内容。

最后，大家可以在CSS中设置搜索框的字体大小和行高，以及搜索按钮的样式。这可以让用户更容易找到搜索框，提高搜索效率。

综上所述，设计和优化CSS搜索框需要考虑多个方面，包括外观、布局、输入方式和用户体验。如果你能遵循以上几点设计原则，你的CSS搜索框一定能够让用户感到舒适和便捷。