Question

我有一个带有按钮的下拉按钮用于触摸屏应用程序。我的李是内联的，因为我把它们变成按钮。我不能让它们显示块或内联块。它们必须是内联的。所以它就像这样设置......

<ul>
    <!-- ko foreach: Options -->
        <li role="presentation" class='item'><a class='btn btn-primary dropdownBtn' role="menuitem" tabindex="-1" data-bind="html: Name">&nbsp;</a></li>
    <!-- /ko -->
</ul>

这对于显示的项目工作正常，但是每个项目都有自己的宽度，并且在列表中看起来很奇怪和不匹配。所以我一直在努力做的就是找到最长的李，然后将其余部分设置为那个长度，这样它们就会都是均匀的。

我不能在这里简单的路线并设置最小或最大宽度，因为这些是动态列表，我不知道它们将在其中生成什么。

到目前为止，我一直在尝试这样的事情。

//This grabs each li based on the dropdown that is clicked on.
var lis = $(event.currentTarget).next().find('li');

然后我试图遍历该列表中的每一个并找到宽度

var maxWidth = 0;
var elemWidth = 0;
    $(lis).each(function() {
        elemWidth = parseInt($(this).css('width'));
        if (parseInt($(this).css('width')) > maxWidth) {
            maxWidth = elemWidth;
        }
    });

但宽度保持返回0，即使显然有一个宽度，否则它不会显示或显示奇怪。我能够在控制台中获取值，但无论我在这里尝试什么，它都会继续返回0。

我试过获取outerWidth或只是宽度（），但它们都返回0或导致错误，说那里没有函数。这是我认为我的主要问题所在。

然后我会将li设置为正确的宽度。

$(lis).each(function() {
    $(this).css('width', maxWidth + "px");
});

任何帮助都会很棒！我正好被卡住了！

Answer 1

您可以使用Math.max获取li的最大宽度：

var maxW = Math.max.apply(Math, $('li').map(function(){ return $(this).width(); }).get());

Fiddle

并使用$("li").width(maxW);

设置所有li的宽度

Fiddle - get and set max width

作为参考：jQuery get max width of child div's

Answer 2

在您发表评论之后，我将仅限CSS的答案更改为jQuery解决方案。我使用了与之前相同的列表，并尽量保持最小化。代码迭代列表项，获取最长的宽度，并将宽度应用于所有这些项。

需要考虑的事项：我认为这些项目至少需要内联块才能正确获取和设置宽度。在应用CSS时，我认为您需要添加＆＃39; px＆＃39;以及使其合法化。 $.width()函数计算宽度，这比获取宽度css属性更好。如果你得到CSS，你可以从样式表中获得宽度。由于您没有添加任何内容，因此这不是您需要的价值。

＆＃13;

$(function(){
  var maxWidth = 0;
  var $items = $('li.item');
  $items.each(function(){
      var width = $(this).width();
      if (width > maxWidth)
        maxWidth = width;
    });
  $items.css('width', maxWidth + 'px');
});

＆＃13;

li {
  display: inline-block;
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li role="presentation" class='item'>Short</li>
  <li role="presentation" class='item'>Less short</li>
  <li role="presentation" class='item'>Even lesser short</li>
  <li role="presentation" class='item'>Quite long</li>
  <li role="presentation" class='item'>This might very well be the longest one</li>
  <li role="presentation" class='item'>This one is not that long</li>
  <li role="presentation" class='item'>Quite avarage, atually</li>
  <li role="presentation" class='item'>Last but not least</li>
</ul>

＆＃13;

Answer 3

如何将li样式设置为display: block？我可能错了，但我相信它会使所有li s占据容器宽度的100％。

修改

我不确定为什么会这样：

$('ul li').css('style', width + 'px !important');

不起作用，这样做：

$('ul li').attr('style', 'width:' + width + 'px !important');

但这似乎是个问题。似乎有点＆＃39;对我来说很奇怪。

见这里：http://jsbin.com/weduwuhizadu/1/

整个代码：

$(document).ready(function() {
  // find the longest
  var width = 0;
  $('ul li').each(function() {
    var w = $(this).width();
    if(w > width) {
      width = w;
    }
  });


// assigning the 'width' to all:
  $('ul li').attr('style', 'width:' + width + 'px !important');
});

找到最长的li并将每个li设置为该长度

3 个答案:

修改