Question

我为我的应用程序设计了一个网格布局，但我不知道它会有多少列。我想动态设置列的宽度。而不是除以[3]我想除以[n]，其中[n]是我的foreach在客户端角度代码中吐出的li元素的数量。

我无法在此项目中使用任何外部库。

 li {
                    display:block;
                    float: left;
                    width: calc(~'(100% - 30px)/3');
                    padding-left: 25px;                    
                    text-align: center;
}

有没有办法动态统计<li>内的<ul>元素？

Answer 1

回答有关如何动态计算<li>内<ul>数量的问题。你可以使用javascript .length函数，一个带有一些JQuery。

$("ul li").length; 
// OR Better
$("#id_of_ul li").length;

然后你可以按照<li>的数量进行操作，这可以由函数返回。

＆＃13;

function update() {
  return $("#counter li").length;
}


$(".add").on("click", function() {
  $("#counter").append("<li>Random</li>");
});
$(".count").on("click", function() {
  new_count = update();
  $(".output").html(new_count);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

＆＃13;

Answer 2

我不知道为什么我的答案被低估了，所以我会重新发布它以便你可以看到一些代码。

Flex布局是一种非常强大的方法，可使您的列具有相同的宽度;而且一切都表现得一样基本上，它就像一个基于列的网格（例如bootstrap），但只有几行CSS。

以下是代码示例：

.parent-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; // wrap will fit in the parent. nowrap will extend the parent.
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.children {
    flex: 1 1 auto; // All the same width, always
}

Answer 3

与@Rithwik相同的答案，但JQuery免费

function update() {
  return document.querySelectorAll("#counter li").length;
}

document.querySelector(".add").onclick = function() {
  document.querySelector("#counter").innerHTML += "<li>Random</li>";
};
document.querySelector(".count").onclick = function() {
  document.querySelector(".output").innerHTML = update();
};

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer 4

也许灵活布局适合你？

如果您使用Angular 2，请查看flex layout。

否则，此CSS tricks complete guide可以为您提供帮助。

编辑根据要求提供示例代码：

.parent-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; // wrap will fit in the parent. nowrap will extend the parent.
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.children {
    flex: 1 1 auto; // All the same width, always
}

有没有办法根据它有多少兄弟来设置元素的宽度？

4 个答案: