CSS响应式菜单 - 右填充[关闭]答案

【问题标题】：CSS responsive menu - right padding [closed]CSS响应式菜单 - 右填充[关闭]
【发布时间】：2013-07-31 16:19:00
【问题描述】：

我在 div 中间有响应式菜单。

调整屏幕大小后，菜单移动到屏幕右侧。

预览示例：>>> CODE here <<<（所有 html/css/js 均可通过网络访问）

看起来像这样>

问题：

如何右对齐如图...

提前谢谢你。

PS：代码在示例链接（html文件）中

【问题讨论】：

请阅读：>>> PS：代码在示例链接（html文件）中，为什么要为看不懂的加负分？
-1 是我的：meta.stackexchange.com/questions/125997/…
我创建了网站示例以获得更好的视图，我在 jsfiddle 上有这个但是如果你调整屏幕大小你看不到输出正确，你知道我的问题是什么吗？
你的问题中应该有代码，应该归结为问题本身。 Jsfiddle 并不比链接到您的网站好多少。当然，它可以作为您问题中代码的补充。问题是，如果您的网站将来出现故障，您的问题将毫无意义。

【解决方案1】：

将position: relative; 添加到.content-menu，并将position: absolute; right: 0; 添加到.nav（都在移动设备大小的媒体查询中）。

编辑还可以删除.nav和.nav > li的宽度并将它们更改为max-width: 280px; min-width: 200px;，这样它就不会在小于300px的屏幕上中断。

希望对您有所帮助。

【讨论】：

它对我有用，但有一件事，如果我将 .nav 放在桌面视图中，它将在桌面视图中搜索菜单。您的回答很好，但删除最后一个（....）并接受您的回答，谢谢
.nav 在移动端媒体查询中不需要更改
我不确定我是否理解这个问题。将这些代码放入您的@media screen and (max-width: 640px) { 部分，它只会影响小于 640 像素的屏幕 :)

【解决方案2】：

div.content-menu {
    position: relative;
}
ul.nav {
    position: absolute;
    right: 0px;
}

【讨论】：