Question

在将浏览器缩放到一个小宽度时，我一直试图让它停在导航栏下方，这就是我的意思（我不能发布图片，因为我没有至少10个代表）

但你可以在这里看到我的意思：

http://79.170.40.39/senixmenix.com/index.html

（缩小浏览器的宽度，然后就可以看出我的意思了）

我对Web开发还很陌生，所以我还有很多不明白的地方，希望你能帮助我： - ）

亲切的问候，的Jesper

Answer 1

这是因为“SenixMenix”徽标位于左侧，当列表项目用完房间时，因为用户使浏览器变小，他们会低于“SenixMenix”徽标，因为它占用了很多空间。我要求做的是在637px添加媒体查询（即列表项目点击徽标时）以显示较小的徽标。

.bigLogo{
    display: block;
}

.smallLogo{
    display: none;
}

@media (max-width: 637px){
    .bigLogo{
        display: none;
    }

    .smallLogo{
        display: block;
    }
}

Answer 2

在窗口较小时考虑所需的行为会很有帮助。是否希望它只是离开屏幕而不是包裹？

如果是这样，您可以在标题中添加min-width：

#header {
    min-width:700px;
}

这将解决它，但可能不太理想。更好的想法是阅读响应式设计，以更优雅地适应不同的尺寸。

Answer 3

由于物品+徽标的宽度与屏幕的宽度较小而存在溢出。为了显示信息，它必须在下一行。

这两个答案涉及水平滚动+溢出

Response 1

Response 2

但是，我建议您查看bootstrap的样式。它有很棒的样式表，可以让你通过css减少挑选，以获得你正在寻找的东西。如果bootstrap不是你的爵士乐，那么网上有很多其他模板！

[HTMl / CSS]将浏览器缩放到小宽度时，列表项位于导航栏下方

3 个答案: