你今天好吗

Original

我想留下来：

Objetive

注意：此列表是动态的！

谢谢大家的帮助

Answer 1

你不能。

LI垂直或水平移动，它们不会换成新的颜色。

如果你想要如图所示的列表，你需要使用多个UL并浮动它们。

如果您的LI列入了很长的列表，您可以编写一些JavaScript，将其分解为多个UL。 CSS本身无法做到这一点。

Answer 2

也许回答旧帖子。但是，如果您希望列表项是动态的并且在4列中，则可以在CSS中使用它。

div {
    -webkit-columns: 100px 4; /* Chrome, Safari, Opera */
    -moz-columns: 100px 4; /* Firefox */
    columns: 100px 4;
}

围绕<ul>包裹div而不是使用此css。

正在使用 DEMO

Answer 3

您需要使用多个容器并在它们之间分配元素。 CSS目前不支持列式布局，例如您正在尝试的内容。

无论如何，如果内容是在服务器端生成的，那么您可以在那里分隔列。否则你可以使用JavaScript在客户端进行。如果你不介意jQuery，像Masonry这样的东西可以解决所有繁重的问题。

Answer 4

很抱歉令人失望，但你需要将列表分成三个，

<ul>
 <li></li>
 ...
</ul>

<ul>
 <li></li>
 ...
</ul>

<ul>
 <li></li>
 ...
</ul>

设置ul元素的宽度并让它们浮动

ul {
 display: block;
 width: 200px;
 float: left;
}

以下元素应该是clear：left;

Answer 5

您可以使用css显示属性。

ul li {
display: inline-block;
}

Answer 6

你可以简单地漂浮它们......

li { float: left; width: 200px; }

DEMO

或使用内联块....

li { display: inline-block; width: 200px; }

Demo

这会导致列表项水平显示而不是垂直显示。如果您希望列表项垂直列出，则需要为每个列表使用多个容器（ul）。

Answer 7

当你认为你的问题有点创意时，就会有一个相对简单的解决方案。

您必须在一列中确定最多有多少李。当您动态获取数据时，您可以直接动态创建ul。它可以在服务器端实现，也可以在客户端实现，而不会出现问题。

Answer 8

由于您知道UL和LI元素的像素尺寸，因此您至少可以在理论上轻松定位LI。例如：

<!DOCTYPE html>
<html>
<head>
<title>example<title>
<style type="text/css">
ul { border : 2px solid blue ; height : 200px }
li { height : 25px; }
li:nth-child(9),
li:nth-child(17),
li:nth-child(25), 
li:nth-child(33) {
  margin-top : -200px
}
li:nth-child(8)  ~ li { margin-left : 150px }
li:nth-child(16) ~ li { margin-left : 300px }
li:nth-child(24) ~ li { margin-left : 450px }
li:nth-child(32) ~ li { margin-left : 600px }
</style>
</head>
<body>
<ul>
  <li>LI number 1</li>
  <li>LI number 2</li>
  ...
  <li>LI number 36</li>
</ul>
</body>
</html>

UL块只会与最新列一样高，因此您需要明确设置其高度。

如何垂直打破<li>元素</li>

你今天好吗

我想留下来：

8 个答案: