朋友们,我在面向子菜单中排列图像时遇到了响应问题.我有一个宽度为1280px的容器,适用于所有屏幕.正如您在小提琴中看到的那样,我将类别作为菜单,然后当我们点击类别时,它会打开带有图像的菜单.我希望这些菜单在所有屏幕上居中,其边框应覆盖整个屏幕.
简单来说,我们的类别应该从左侧徽标的正下方开始,所有图像应始终以所有屏幕为中心.现在带图像的子菜单总是向左或向右移动我希望子菜单中的图像始终占用容器宽度,并通过左右边距适合所有桌面屏幕的容器,整个子菜单应覆盖整个屏幕请查看此代码demo供参考我正在添加截图请参考,看看你是否可以帮我这个,非常感谢你给我的时间.
这张图片展示了我现在得到的东西problem_img
这就是我想要的exact_img这虽然在右边有一些较小的空间.但我需要这样的东西,所有内容都应该适合容器宽度,左右相同的空间和覆盖整个屏幕尺寸的背景黑色.我尝试使用margin-left,但它只适合我设置的屏幕,请帮助我使这个菜单响应.任何帮助建议表示赞赏. Updated JSFiddle
谢谢.
[1]: https://jsfiddle.net/p7qrv3av/
解决方法
https://jsfiddle.net/vinothsdev/p7qrv3av/5/
我在这里更新了你的小提琴.你的html标签看起来更乱,但我只是修改它以满足你的要求.
.top-category-div{
background: black;
color: white;
padding-bottom: 54px;
}
.container-menu{
margin-right: auto;
margin-left: auto;
}
.category-dropdown-menu{
margin-left: -300px;
width: 1280px;
}
img{
width:100%;
}
