HTML CSS导航栏：图像对齐和大小调整

考虑以下HTML+CSS代码：

html{
背景颜色：绿色；
保证金：0；
最小宽度：320px；
最小高度：100vh；
}
身体{
保证金：0；
}
导航#主导航{
背景色：白色；
高度：50px；
显示器：flex；
}
#集装箱标志{
宽度：200px；
身高：100%；
弹性收缩：0；
}
@介质（最大设备宽度：640px），
（最大宽度：640像素）{
#集装箱标志{
宽度：60px；
}
}
#集装箱标志a{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#集装箱标志{
内容：url（“http://www.dummymag.com//media/img/dummy-logo.png");
最大宽度：90%；
最大高度：40px；
}
@介质（最大设备宽度：640px），
（最大宽度：640像素）{
#集装箱标志{
内容：url（“http://coachmikelee.com/wp-content/uploads/2014/11/dummy-logo.png");
}
}
#容器搜索栏{
身高：100%；
宽度：100%；
背景颜色：橙色；
}
#容器登录状态{
宽度：200px；
身高：100%；
弹性收缩：0；
背景颜色：蓝色；
}
@介质（最大设备宽度：640px），
（最大宽度：640像素）{
#容器登录状态{
宽度：自动；
最小宽度：50px；
}
}

我同意你的看法，这似乎有点太花哨了。我将您的代码用于内联块和浮动，问题是容器搜索栏的宽度

你最好把所有的媒体查询放在一个地方，而不是分散在一个地方。如果它们都在一个地方，那么以后就更容易找到了。当你在CSS中使用背景图像，但希望它们表现得像一个

，它总是会产生额外的工作。您可以使用@SamJohnson，这不一定，最初是惯例，但在过去几年中，开发人员已经开始在需要的地方放置媒体查询。这样，您就不必跳转到

@medai（xxxx）{}

块来查看某个样式是否在特定断点处实际使用。@hungerstar哦，好的，很有趣。我想这可以归结为个人喜好。我觉得为每个需要调整的元素键入相同设备/大小的媒体查询会很烦人。@SamJohnson，这就是为什么您使用CSS预处理器。“我将您的代码与内联块一起使用，并浮动“介意发布代码吗？这是一条注释，而不是答案。”。请赚取50个评论代表。nav#main nav div{display:inline block；float:left；}nav#main nav{display:block；}这并不能解决您的问题（抱歉），因为现在您对容器搜索栏div的宽度有问题。此外，您还可以删除display:flex，并使用行高垂直定位img/a标记“现在您对容器搜索栏的宽度有问题”过去有一种技术，可以

浮动：右

登录容器并让logo（固定宽度）+搜索容器（可变宽度）我想这会解决你提到的问题。但是，这需要搞乱HTML文件中行的自然顺序（flexbox开发的原因之一）。