Html CSS中的浮动导致元素向下移动 我的游戏商店 身体{ 保证金：0； } #容器{ 最小宽度：1080px； } #上杠{ 背景色：#f1f1； 高度：60px； 宽度：100%； } #洛格巴迪夫{ 利润率：10px 20px 10px 30px； 浮动：左； } #标志{ 高度：39px； 宽度：183px； } #搜索巴迪夫{ 浮动：左； 填充：15px 0px 15px 10px； } #搜索栏{ 高度：28px； 宽度：545px； 字号：1em； }

在我试图制作的上面的页面中，当我减小浏览器窗口的大小时，“searchbardiv”倾向于移到“logobardiv”的下方

---

我只希望两个div在同一行。我尝试使用“float:left”，但它没有给出所需的结果。

您将搜索栏宽度设为545px，在小屏幕上使用媒体查询时尝试减小此宽度： e、 g

---

希望这会有所帮助

搜索栏的大小太长，因此会显示在下一行中。请将徽标大小和搜索栏宽度设置为%

@media(max-width:768px) {
     #searchbar{
      width:200px;
    }

---

解决方案1：如果希望div灵活，请使用%而不是像素作为宽度，例如：

  width:70%;

解决方案2：如果不希望使用屏幕调整div的大小，请将其设置为表格单元格：

  #searchbar{
    height:28px;
    width:80%;
    font-size:1em;
    }

---

尝试对两个子元素使用

display:inline block

，并使用

white space:nowrap

将它们保持在同一行，而不是使用浮动

将

display:inline block

应用于

#logobardiv

和

#searchbardiv

并将

垂直对齐：中间对齐（或其他需要的值）应用于
#logobardiv
，以解决任何垂直对齐问题

最后，将
空白：nowrap
应用于
#上栏
，以使两个子元素保持在同一行上

注意，对于足够小的屏幕，可以进行水平滚动。要解决这个问题，您需要做出设计决策来处理这种情况。您可以使搜索输入宽度变小或徽标变小，或者两者都变小，也许可以使用%widths使其响应。你有几个选项可以解决这个问题


正文{
保证金：0；
}
#容器{
最小宽度：1080px；
}
#上杠{
背景色：#f1f1；
高度：60px；
宽度：100%；
空白：nowrap；
}
#洛格巴迪夫{
利润率：10px 20px 10px 30px；
显示：内联块；
垂直对齐：中间对齐；
}
#标志{
高度：39px；
宽度：183px；
}
#搜索巴迪夫{
显示：内联块；
填充：15px 0px 15px 10px；
}
#搜索栏{
高度：28px；
宽度：545px；
字号：1em；
}

我正在尝试创建一个play store的副本以供练习。看来您的解决方案是完美的。这正是我想要的。我希望搜索栏的大小保持不变，无论屏幕大小如何。谢谢大家的帮助！！！
  #searchbar{
    height:28px;
    width:80%;
    font-size:1em;
    }

  #upperbar{
/* your current styles here */
display:table;
    }

  #logobardiv{
/* your current styles here */
display:table-cell
    }


#searchbardiv{
/* your current styles here */
display:table-cell
}