javascript - 如何使用 Javascript 检测区域的宽度并应用正确的菜单间距

Question

我可以使用 Javascript 来检测 menuArea 的大小吗？然后应用每个 <li>适合总尺寸的尺寸menuArea ？

// something like this...

var menuSpace = Math.floor((menuAreaWidth - menuButtonsTotalWidth) / (menuButtons.length - 1));
// set positions
var menuButtonsLeft = 0;

$('#menuArea .menuButtonHolder').each(function(i, buttonHolder) {
  if (i < (menuButtons.length - 1)) {
    $(buttonHolder).css({
      'left': menuButtonsLeft + 'px',
      'width': menuButtons[i].buttonWidth + 'px'
    });
  }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#menuArea {
  max-width: 1050px;
  margin: 0px auto;
}
li {
  float: left;
}
li .menuButtonHolder {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuArea">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="news.aspx">News and Events</a></li>
    <li><a href="social.aspx">Social</a></li>    
    <li><a href="blog.aspx">Our Blog</a></li>
    <li><a href="contact.aspx">Contact</a></li>
  <ul>
</div>

没有它，为了让菜单填满整个menuArea我发现自己不得不反复试验不同的 padding: 0px 20px 0px 20px等等，直到它们都在这里或那里拉伸(stretch)整个距离。

Answer 1

请不要将 JavaScript 用于您可以让 CSS 完成的事情。

Flexbox 有一个很好的方法可以为您解决这个问题，将这些行添加到您的示例中:

ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

如果您希望元素的宽度与最大元素的宽度相同:

li {
    flex: 1;
}

示例片段:

ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

#menuArea {
    max-width: 1050px;
    margin: 0px auto;
}

li .menuButtonHolder {
    display: inline-block;
}

li {
	flex: 1;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<div id="menuArea">
<ul>
 <li><a href="/">Home with a really long name.</a></li>
 <li><a href="about.aspx">Home</a></li>
 <li><a href="news.aspx">News</a></li>
 <li><a href="social.aspx">Social</a></li>    
 <li><a href="blog.aspx">Blog</a></li>
 <li><a href="contact.aspx">Contact</a></li>
<ul>
</div>