调整 CSS 类填充的 jQuery 代码

Question

在我的网页上Lemendu我设置了两个 CSS 类“redback”和“greenback”，对应于我的顶部菜单部分“ESPAÑOL”和“FRANÇAIS”，将它们放在右侧。 但我对媒体查询有一个问题:在宽度 767px 下，两个 CSS 类与屏幕不匹配。我希望它们与我的顶级菜单的其他 CSS 类垂直排列(也就是说没有任何填充或边距)。 我无法在我的媒体查询文件的每个屏幕尺寸中直接更改我的 CSS 类，因为那样的话，它将与 767 像素以下的屏幕不匹配。

我发现唯一的解决方案是直接调整我的 jQuery 文件中的两个 CSS 类，告诉他我不需要任何填充。 (除非有人有任何 CSS 解决方案)。 但我完全了解 jQuery 代码。

这是我的 CSS 两个类:

.redback {font-size:15px; color:#1b1c1e; padding:0px 10px 0px 120px; font-weight:400; width: 50px; position: relative; }
.greenback {font-size:15px; color:#1b1c1e; padding:0px 20px 0px 10px; font-weight:400; width: 50px; }

这是我的 jQuery 代码:

jQuery(document).ready(function(){


    jQuery('#nav-button').click(function() {
            jQuery('#options li').toggle();
    });

    if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();
    });
    }

    jQuery(window).resize(function() {
  if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();

    jQuery(window).resize(function() {
  if ( jQuery(window).width() > 767) {
            jQuery('#options li').show();
            jQuery('#options li a').click(function() {
            jQuery('#options li').show();
    });
    }
    });

}); 

我提前感谢您的建议，我们将不胜感激。

Answer 1

关于您的 css 媒体查询:

媒体=“全部” @media only 屏幕和(最大宽度:767px) .redback 和 .greenback 您需要删除将文本推到一边的填充。 您所需要的只是每种颜色的样式。