CSS在特定“ inline-block”项目之前/之后换行

  • Z时代
  • 2024-01-10
  • 分类：问答

假设我有以下HTML：

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

和这个CSS：

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

现在想象一下，我想将其分为三列，相当于<br>在第三列之后注入a <li>。 （实际上，这样做在语义和语法上都是无效的。）

我知道如何<li>在CSS中选择第三个，但是如何在它之后强制换行呢？这不起作用：

li:nth-child(4):after { content:"xxx"; display:block }

我也知道使用float代替可以实现这种特殊情况inline-block，但是我对使用的解决方案不感兴趣float。我也知道，对于固定宽度的块，可以通过将父对象的宽度设置为该宽度的ul3倍来实现。我对此解决方案不感兴趣。我也知道，display:table-

cell如果我需要真实的列，可以使用它。我对此解决方案不感兴趣。我对强制在内联内容中中断的可能性感兴趣。

：明确地说，我对“理论”感兴趣，而不是对特定问题的解决方案。

_CSS可以在display:inline(-block)?元素中间插入换行符吗，还是不可能？_如果您确定这是不可能的，那是可以接受的答案。

回答：

我已经能够使其适用于内联LI元素。不幸的是，如果LI元素是内联块，则它不起作用：

或悬崖笔记版本：

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

以上是 CSS在特定“ inline-block”项目之前/之后换行 的全部内容， 来源链接： utcz.com/qa/405267.html

回到顶部