Question

我已经做了很多挖掘，似乎无法找到人们如何处理可变宽度元素的内容重组。

例如，如果我有一个动态创建的水平菜单，它可能只有3个项目..

<div>

    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>

</div>

此菜单只有一个小宽度，让我们说400px。我可以创建一个媒体查询来调整窗口低于400px时的显示方式，但是..

如果用户添加了其他项目..

<div>

    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Location</li>
        <li>Contact</li>
    </ul>

</div>

突然，此菜单大于400像素，依此类推。我的问题是，如何构建我的代码来处理可变元素宽度并仍然控制显示的方式？

编辑：当我在水平菜单上重新调整浏览器窗口大小时，在某个可变宽度处，内联块li元素会低于菜单的其余部分。而不是让每个元素在屏幕压缩时掉落，我宁愿让整个菜单垂直方向。我不能简单地使用媒体查询，因为有可变数量的菜单项。为了说明这个问题，请尝试重新调整此小提琴中的示例代码：https://jsfiddle.net/f5Lv73hp/

Answer 1

我不明白你的问题，所以，考虑使用更多信息编辑你的帖子，包括你认为的......

顺便说一下：

水平菜单，如果你需要保持所有列表项具有相同的宽度，你可以使用display-table，没有任何javascript要求，只需将列表设置为一个表（见.menu-horizontal css）。

function CasesCtrl($) {

  var case1 = $('#case1');
  $('button', case1).click(function() {
    var list = $('ul', case1);
    var len = $('li', list).length;
    var newItem = '' +
        '<li class="menu-item">' + 
          '<a class="menu-item-link">Item '+ (len + 1) +'</a>' + 
        '</li>'
      ;
    
    list.append(newItem);
  });

  
}

jQuery(document).ready(CasesCtrl);

article {
  width: 100%;
  padding: 2px;
  border: 1px solid black;
  margin-bottom: 2em;
  overflow: hidden;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
}

.menu-item-link {
  background: lightseagreen;
  margin: 2px;
  padding: 2px 5px;
  display: block;
  text-transform: uppercase;
  line-height: 1;
}





.menu-horizontal {
  display: table;
}


.menu-horizontal .menu-item {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="case1">
  <ul class="menu menu-horizontal">
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 1</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 2</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 3</a>
    </li>
  </ul>
  <button type="button">Add Menu Item</button>
</article>

更具体一点，我会根据您的需要编辑我的答案！

Answer 2

你正在寻找这样的东西吗？ https://jsfiddle.net/4p18mxg9/2/

我使用javascript来获取ul的宽度并将宽度应用于媒体查询，这样当您添加更多li时，它就不依赖于内容。

var width = document.getElementById('ul').offsetWidth;

document.querySelector('style').textContent +=
    "@media screen and (max-width:" + width + "px) { li{float: none; width: 100%; background-color: blue; color: white;}}"

添加了一些颜色，以便更轻松地查看：https://jsfiddle.net/4p18mxg9/3/

可变宽度媒体查询

2 个答案: