我正在尝试使用 column-count CSS3 属性显示 3 个元素列表。
我想使用 Title column 1
作为我的专栏的 title
来显示它,并在它下面显示一个元素列表。
我的问题是我的列将我的元素移到了另一个错误的列中。
这是我的代码:
#columnasFooter{
column-count: 3;
}
<ul id="columnasFooter">
<li>Title column 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</li>
<li>Title column 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
<li>Title column 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
最佳答案
这是完全正常的行为。
如果你不想破坏你的列表,你需要添加额外的样式:
#columnasFooter li{break-inside: avoid-column;}
#columnasFooter{column-count: 3;}
#columnasFooter li{break-inside: avoid-column;}
<ul id="columnasFooter">
<li>Title column 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</li>
<li>Title column 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
<li>Title column 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
关于html - 使用列数显示元素列表时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50466301/