Question

我想使用CSS打破无序列表。我目前拥有的是这个

我需要的是这个

Marcus代码后的情景

这是html

<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a  href="https://prod.us/System_Functionality/Functional_
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>
</ul>
</div>

这是CSS

tab-content { 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: left;
   margin-left: 2.2em;
} 
.tab-content-block { 
   padding: 0 1em 1em .5em;
   min-width: 25%;
} 
.tab-content-block ul li {
   margin-bottom:10px;
   margin-left:-17px;
}

Answer 1

您只能在.tab-content-block ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }。

中使用{{1}}

{{1}}

看到它正常工作：

https://jsfiddle.net/hrm3tx9j/1/

Answer 2

将弯曲方向更改为column并提供flex-wrap

tab-content { 
 display: flex;
 flex-direction: column;
 height: 500px;
 flex-wrap: wrap;
 justify-content: left;
 margin-left: 2.2em;
}

如果您提供jsFiddle或Plunkr的演示链接，那将会很棒。

CSS：打破无序列表

2 个答案: