我让一个ul使用columns将其拆分成两列.该列表的列表项数量不均匀,但我希望奇数列表项位于右栏,而不是左栏.这个是可能的吗?

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  columns:2;
}
<ul>
  <li>Left</li>
  <li>Left</li>
  <li>Right</li>
  <li>Right</li>
  <li>Right</li>
</ul>

推荐答案

您可以在数字为奇数时添加一个伪元素以使其成为偶数,并强制第二列包含更多项.两者都有相同数量的条目,但第一个条目将包含伪元素.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  columns: 2;
  margin: 10px;
}

ul:has(> :last-child:nth-child(odd))::before {
  content: "";
  display: block;
  height:.1px;
}
<ul>
  <li>Left</li>
  <li>Left</li>
  <li>Right</li>
  <li>Right</li>
  <li>Right</li>
</ul>

<ul>
  <li>Left</li>
  <li>Left</li>
  <li>Right</li>
  <li>Right</li>
</ul>

Css相关问答推荐

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行?

当具有外部高度的网格项溢出时,为什么溢出滚动端口填充不应用于网格容器?

我无法在css中设置填充或边距

我怎样才能让我所有的网格列的高度等于最短列的高度

如何在 konvajs 中居中放置项目?

如何在 TypeScript 文件中导入 CSS 模块?

Angular Datepicker - 更改日期范围 Select 样式

当计算的宽度不准确时,如何在 cypress 中测试元素的宽度?

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况?

如何使半圆的边框淡出?

调整屏幕大小时无法让我的视频背景保持不变

在响应式设计中指定 HTML 文本中的首选换行点

在表格中使用自动换行:断词

重置子元素的不透明度 - Maple Browser (Samsung TV App)

li 中的第二行在 CSS-reset 后的项目符号下开始

在CSS中将文本和 Select 框对齐到相同的宽度?

如何在浏览器的右下角放置一个div?

CSS 块格式化上下文是如何工作的?

如何将文本与图标字体垂直对齐?