小编Ral*_*onz的帖子

我已经阅读了很多关于使用css均匀分布元素的内容,但我发现的每个解决方案都要求您知道并定义要分发的元素的宽度和/或数量.

我有一个具有固定宽度的容器 - 在这里可以是任何数量的自动宽度的li元素,需要从左到右均匀地分布在父元素上.

这是我的标记 - 除了可以有任意数量的标签,其中包含任何长度的文本.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

因此,当元素和宽度的数量是动态的时,使用css进行均匀分布 - 可以这样做吗？

看起来像这样一个显而易见的事情 - 该死的CSS!

我有一个水平菜单溢出:隐藏应用于它.

菜单是CMS管理的,所以有时它不会溢出,但是当它溢出时我想找到最后一个可见的li元素并插入一个下拉ul,其中包含溢出的菜单项.我遇到的问题是选择最后一个可见的li(为了在它之前插入HTML)作为溢出隐藏的元素:隐藏似乎仍被视为可见.

到目前为止我的代码是:

$(window).load( function () {

    var totalWidth = 0;
    var menu = $('.nav .menu ul');
    var menuWidth = menu.innerWidth();

    menu.find('li').each(function() {
       totalWidth += $(this).innerWidth() + 30; // add margin
    });

    if (totalWidth > menuWidth) {

        var num_li = $('.nav .menu ul > li:visible').length;

        $('.nav .menu ul li:nth-child('+num_li+')').append("<li><a>More</a></li>");
    }

});

变量num_li返回完整数量的li元素,而不仅仅是查看页面的人可见的元素!

我正在尝试将图像容器的 flex css 属性设置为图像的纵横比。我希望 flex css 的形式flex: 1.798245为没有 px 或 1 1 1px。

使用 jQuery css() 方法，它不断将其设置为 flex: 1 1 1.798245px

//gallery flex
$('.gallery-item').each(function(){
  var value = $("img", this).width() / $("img", this).height();
  $(this).css("flex", value);
});

我应该如何将值传递给 css() 以获得我想要的结果？

我有以下脚本工作将奇数和偶数类添加到交替表行,这是正常的.

function alternate(){ 
if(document.getElementsByTagName){  
var table = document.getElementsByTagName("table");
var rows = document.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++){
  //manipulate rows   
      if(i % 2 == 0){  
        rows[i].className = "even"; 
      }else{  
        rows[i].className = "odd"; 
      }
    }
  } 
}

但是,当页面上有多个表时会出现问题.我需要计数器为页面上的每个表重置,这样每个表的第一行总是具有相同的类(即奇数).目前,页面上的第二个表将只进行奇数行计数,因此如果第一个表具有奇数行,它将在不同的类上开始.

任何人都可以帮我改变这段代码来实现这个目标吗