html - 屏幕大小调整和元素位置调整

Question

您可以在下面看到一个页面链接，当宽度缩小到 940 像素或更小时，该页面假设隐藏菜单，而是显示一个下拉菜单。问题是当屏幕尺寸减小时，元素会错位。我想要的是将下拉菜单、红色矩形和搜索栏保持在一行中，无论屏幕大小如何

这是相关的CSS:

nav select {
    display: none;
}
@media (max-width: 940px) {
  nav ul     { display: none; }
  nav select { display: inline-block;margin-left: 300px; margin-top: -10px; }
}

完整代码如下:

https://codepen.io/slackk/pen/RpNBvO

Answer 1

在设计时，您首先要从构建移动网站开始。 但是，回到主题，您的结束标记是结束的，但它是从文档的中间开始的。你确定你放对了吗？