不受欢迎的CSS列溢出

Question

我想实现这样的目标:

但是目前,我只是得到了这个:

解释(感谢Andrei Gheorghiu):

我想以无限数量的内联列显示项目,规则是"1列中不超过2项".第3个项目创建第二个列,第5个项目创建第3个列,第7个项目创建第4个列,依此类推.每列或整个列表必须表现得像内联块.

总结一下:

• 目标是在每列中有两个列表项.
• 整个列表需要在段落的中间 - 不能在之前或之后插入新行.
• 列表中的项目数是未知的.

这是我的代码:https: //jsfiddle.net/2uf951km/6/

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  height: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  /* 
    		Setting margin fixes the issue, 
    		but the with of the list is not
    		known.
    	*/
  /* margin-right: 170px; */
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

如何修改我的CSS/HTML,以便<ul>列表不会覆盖文本？

Answer 1

更新了答案以使用 CSS 网格inline-grid生成内联级别网格来实现您的目标：

grid-template-rows设置为每行最多重复两行1fr。

grid-template-columns设置为重复auto宽度为 的必要列数35px。

grid-auto-flow设置为column让网格自动放置算法依次填充每一列，根据需要添加新列，同时仍保持最多两行。

grid-column-gap用于在列之间添加填充以显示与提供的图像相同的结果。

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(auto, 35px);
  grid-auto-flow: column;
  grid-column-gap: 10px;
  align-items: center;
  list-style: none;
  font-size: 10px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

希望这能解决您的问题！

如果您的目标是最多有 3 个计数，columns如所提供的图像所示，我相信您需要更改的属性是：

column-width: 35px如果columns: auto 3您希望将column-width每列的 设为auto。

或者

column-width: 35px如果您想要每列都有columns: 35px 3特定的内容。column-width

这是该属性的解释columns：

CSScolumns属性设置元素的列宽和列数。- MDN - css 列

下面是我用来实现与您提供的图像相同的结果的代码。

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  columns: auto 3;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

希望这可以帮助！