Question

我希望动态地给出宽度（ul），具体取决于列表中有多少元素。

他们在做什么错了？

我有这个样本：link

＆＃13;

$('.sub-menu').each(function() {
  var liItems = $(this);
  var Sum = 0;
  if (liItems.children('li').length >= 1) {
    $(this).children('li').each(function(i, e) {
      Sum += $(e).outerWidth(true);
    });
    $(this).width(Sum + 1);
  }
});

＆＃13;

.sub-menu {
  background: red;
  display: block;
  overflow: auto;
}
.sub-menu li {
  width: 25%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
</ul>

<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
</ul>

＆＃13;

Answer 1

您可以在display: inline-block;和列表元素上使用<ul>（无需浮动）：

＆＃13;

.sub-menu {
  background: red;
  display: inline-block;
  padding: 0
}
.sub-menu li {
  display: inline-block;
}

＆＃13;

<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
</ul>
<br />
<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
</ul>

＆＃13;

Answer 2

如果你想让这些项目恰好是页面宽度的25％，那么使用css会有点棘手。但我很确定你的目标可以在不借助javascript的情况下实现。

一种方法是伪造它，将背景颜色放在<li>元素而不是<ul>上，并删除它们之间的空间。从技术上讲，列表仍然是页面的整个宽度，如边框所示，因此这个解决方案不会起作用，这是一个问题。

.sub-menu {
  display: block;
  padding: 0;
  margin: 0 0 10px 0;
  border: dashed 1px grey;
}
.sub-menu:after {
  display: block;
  content: '';
  clear: both;
}
.sub-menu li {
  background: red;
  list-style: none; /* hides the bullet */
  width: 25%;
  float: left;
}

<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
</ul>
<ul class="sub-menu">
  <li>menu1</li>
  <li>menu2</li>
</ul>

但是，如果你可以在<li>元素上接受固定的witdth，例如width: 200px那么andreas'建议的答案是更好更清洁的解决方案。

如何为ul提供动态宽度

2 个答案: