如何知道 ul 什么时候对 li 太小答案

【问题标题】：How to know when ul too small for li如何知道 ul 什么时候对 li 太小
【发布时间】：2015-08-29 09:19:42
【问题描述】：

我正在尝试制作一个像引导程序这样的响应式模板，并且我正在尝试找到一种方法来了解 ul 对于 li 元素是否变得太小。我有一个这样的 ul：

<ul>
    <li>Element one</li>
    <li>Element two</li>
    <li>Element three</li>
    <li>Element four</li>
</ul>

如下图所示，ul（红线）占据了整个页面宽度：

如果 ul 的宽度等于 li 元素的宽度，我想做点什么。

对不起，如果这篇文章不是最容易理解的。

【问题讨论】：

@Rejith R Krishnan 我得到您的关注，您需要设置 ul 的宽度。

标签： javascript jquery html css uinavigationbar

【解决方案1】：

您可以预先计算最小宽度（li 元素为了不中断而需要的宽度），只需将 min-width 设置为 ul：

ul {
  min-width: 800px;
}

如果你想在它达到那个大小时做更多的事情，你可以使用 JavaScript 设置一个窗口调整大小侦听器，在该侦听器中检查 ul 元素的宽度，并根据其宽度采取适当的措施。

看这个简单的例子：

var ul = document.getElementById('d');
var lis = ul.getElementsByTagName('li')
var requiredWidth = 0;
var padding = 100;

for(var i = 0; i < lis.length; i++){
  requiredWidth += lis[i].offsetWidth;
}

// make the ul red if it's not as wide as the width of lis plus the padding
function handleSize() {
  if (ul.offsetWidth < requiredWidth + padding) {
    ul.style.background = 'red';
  } else {
    ul.style.background = "";
  }
};

window.onresize = handleSize;
handleSize();

#d {background: #eee} 
#d li {
  border: 1px solid;
  display: inline-block;
  min-width: 200px;
  height: 50px;
  background: green
}

<ul id="d">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<p>Go "Full Page" and then try shrinking the window size to below ~908 pixels</p>

【讨论】：

是的，但请记住，这将是一个开源模板，有些用户会放置比 4 个更多的 li 元素。
我不可能知道这一点。您可以使用JS动态计算所需的宽度。
你能举个例子吗？
当然，用一个简单的示例更新了我的答案，该示例根据其 li 子元素的宽度更改颜色。使用这种方法，您几乎可以做任何事情。
我稍后要试试这个，我得走了。

【解决方案2】：

可能是这样的：你得到每个 li 元素的总宽度放在一起，然后将它与“body”元素的宽度进行比较，可能不是你想要的确切的东西，但在正确的方向

$(document).ready(function() {

  var total_width = 0;
  $('.test li').each(function(index) {
   total_width = total_width + $('.test li:nth-child(' + index + ')').width(); 
  });
   if(total_width >= $('body').width()) {
   //Do Something
   }
});

【讨论】：

为什么要用 nth-child 使事情复杂化？一个简单的total_width += $(this).width(); 就可以了……

【解决方案3】：

ul 是一个块元素，如果没有给定样式，则采用全宽。但是如果你想将 ul 的宽度限制为它的 li 元素，你可以简单地使用 display 属性使 ul 元素成为内联元素。

<ul class="navigation">
    <li>Element one</li>
    <li>Element two</li>
    <li>Element three</li>
    <li>Element four</li>
</ul>

 // Style
.navigation{
    display: inline;
 }

【讨论】：

我相信 OP 希望 ul 成为一个块，但是当里面的 lis 开始分成多行（没有足够的宽度来适应）时，以不同的方式处理它。