如何知道什么时候 ul 对 li 来说太小了

Question

我正在尝试制作类似 bootstrap 的响应式模板，并且我正在尝试找到一种方法来了解 ul 是否对于 li 元素来说太小了。我有一个这样的 ul:

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

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

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

抱歉，如果这post不是最容易理解的。

Answer 1

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

ul {
  min-width: 800px;
}

如果你想在它达到那个大小时做更多的事情，你可以使用 JavaScript 设置一个 window 调整大小监听器，你可以在其中检查 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>

Answer 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
   }
});

Answer 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;
 }

如何知道什么时候 ul 对 li 来说太小了

How to know when ul too small for li

javascript

jquery

html

css

uinavigationbar