Html 搜索栏转到下一行

所以我有一个搜索框，但每次我调整窗口大小并缩小它时，它都会将其发送到新行

我试着给它加上float，但它完全让它看起来很奇怪。它会把它推到右边，缩小它，然后仍然会转到一条新的生产线

这是我的CSS

.search-container {
    margin-left: 35%;
    margin-top: 8px;
}
.search-container input[type=text] {
  padding: 6px;
  border: solid;
  border-color: #c4baba;
 border-width: 1px;
  margin-right: -4px;
  font-size: 17px;
  width: 38%;
 background: #121212;
}
.topnav .search-container button {
  padding: 7px 10px;

  /*margin-right: 35%;*/
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

这是HTML

<div class="topnav">
        <a class="active" href="#home">----Image----</a> 
        <a href="#news">Discover</a>
        <a href="#contact">Following</a>
        <div class="search-container">
            <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>

    </div>

---

您可以使用flexbox实现此行为。查看我添加到

.topnav

的内容

.topnav{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.搜索容器{
左边缘：35%；
边缘顶部：8px；
}
.search容器输入[类型=文本]{
填充：6px；
边框：实心；
边框颜色：#c4baba；
边框宽度：1px；
右边距：-4px；
字号：17px；
宽度：38%；
背景：#121212；
}
.topnav.search容器按钮{
填充：7px 10px；
/*保证金权利：35%*/
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}

---

我使用了float:right和then，并使用right和top设置其位置

。搜索容器{
浮动：对；
右：3px；
顶部：8px；
}
.search容器输入[类型=文本]{
填充：6px；
边框：实心；
边框颜色：#c4baba；
边框宽度：1px；
右边距：-4px；
字号：17px；
宽度：38%；
背景：#121212；
}
.topnav.search容器按钮{
填充：7px 10px；
/*保证金权利：35%*/
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}

这似乎不起作用。只是为了你而毁了它me@htmlhelp32请阅读如何将flexbox或do layout与其他工具（如css网格或引导）一起使用。我的解决方案是一个快速解决方案，它不会将搜索栏换行，这正是您所要求的。