css - 两列中的有序列表,其中包含一些长条目

标签 css

我正在处理一个有序列表,其中包含一系列 li 标签,条目长度各不相同。我想把它们分成两列(现在不使用列数)。我想要实现的是:

Item 1              Item 2
Item 3 so           Item 4
long it overflows  
Item 5              Item 6
Item 7 also too     Item 8
long but isn't such
a problem on right

但这就是我得到的最好结果。

Item 1             Item 2
Item 3 so          Item 4
long it overflows  Item 5
Item 6             Item 7 also too long but
                   isn't such a problem on right
Item 7             Item 8

无论我尝试什么, float 、显示:内联等等,我最多只能得到我的第一个例子。谁能想出一种在 CSS 中执行此操作的简洁方法?

编辑:jsfiddle 在这里:http://jsfiddle.net/c0rLqqbw/1

最佳答案

根本不要使用列。尝试:

.myContainer li {
  float: left;
  width: 50%;
}

关于css - 两列中的有序列表,其中包含一些长条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27640571/

相关文章:

jquery - 我如何在一个链接中打开一个循环加载器 4 秒,然后打开一个新页面?

html - 水平对齐 3 个 div,没有边距,仅在 chrome 中存在错误

css - 使用 html/css 重叠行

javascript - CSS:如何用颜色部分填充星星?

html - 用于在 Visual Studio 代码中引导 css 类的 Intellisense

CSS 表 td : box shadow cut on right side

javascript - 为什么 width/height 元素属性呈现与内联/CSS 样式不同?

html - flexbox 容器不会拉伸(stretch) 100% 高度

javascript - 如何创建带有子菜单的 float 菜单

javascript - 如何在用户点击广告时删除广告?为了保护多次点击同一个广告?