当前位置：文江博客话题详情

我怎样才能打破
垂直元素

发布于 2025-01-02 20:29:30 字数 345 浏览 0 评论 0原文

我有一个

元素列表，其中

你今天好吗

Original

我想留下来的方式：

Objetive

注意：此列表是动态的！

感谢大家的帮助

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一生独一 2025-01-09 20:29:30

你不能。

LI 垂直或水平移动，它们不会换行到新的列。

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

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

回复收藏 0 原文

心欲静而疯不止 2025-01-09 20:29:30

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

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

将 div 包裹在

工作 DEMO

Maybe an answer to an old post. But if you want your list items to be dynamic and in 4 columns, you could use this in the CSS.

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

Wrap a div around the <ul> and than use this css.

Working DEMO

回复收藏 0 原文

伴我老 2025-01-09 20:29:30

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

无论如何，如果内容是在服务器端生成的，您可以在那里分成几列。否则，您可以使用 JavaScript 在客户端执行此操作。如果您不介意 jQuery，像 Masonry 这样的东西可以完成所有繁重的工作。

回复收藏 0 原文

梦忆晨望 2025-01-09 20:29:30

很抱歉让您失望，但您需要将列表分成三个，

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

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

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

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

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

以下元素应该有clear: left;

sorry to disappoint but you'll need to break the list into three,

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

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

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

set a width for the ul elements and let them float

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

a following element should have clear: left;

回复收藏 0 原文

独享拥抱 2025-01-09 20:29:30

您可以使用 css 显示属性。

ul li {
display: inline-block;
}

you may use the css display property.

ul li {
display: inline-block;
}

回复收藏 0 原文

江心雾 2025-01-09 20:29:30

您可以简单地浮动它们...

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

DEMO

或使用 inline-block...

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

Demo

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

You could simply float them...

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

DEMO

or use inline-block....

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

Demo

These do result in list items being displayed horizontally rather than vertically.
If you want list items to remain listed vertically, then you need to use mutiple containers (ul) for each list.

回复收藏 0 原文

幽蝶幻影 2025-01-09 20:29:30

当你稍微创造性地思考你的问题时，就会有一个相对简单的解决方案。

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

回复收藏 0 原文

音盲 2025-01-09 20:29:30

由于您知道 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 块只会与最新列一样高，因此您需要显式设置其高度。

Since you know the dimensions in pixels of the UL and LI elements, you can position the LIs easily, at least theoretically. For example:

<!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>

The UL block will only be as high as the latest column, so you need to explicitly set its height.

回复收藏 0 原文

~没有更多了~