html - 在列中打破 UL(为清楚起见进行了编辑)

Question

我的第一个类页面上有以下代码。

<div class="home-tab-title">
<img class="home-duck" src="https://accenturelife-
prod.mindtouch.us/@api/deki/files/2426/AlipSuite.png?origin=mt-web" />
<div class="home-heading">'Training Documentation'</div>
</div>

<div class="tab-content1">

<div class="tab-content1-block">
<div class="home-subheading">'Getting Started'</div>
<ul style="list-style: none;">
<li><a href="/@api/deki/files/2682/ALIP_Overview_Presentation.pptx? 
origin=mt-web">'ALIP Overview'</a></li>
<li><a href="/Training/ASW_VPN_Setup">'ASW VPN Setup'</a></li>
<li><a href="/Training/Workflow_and_Java_Version_8">'Workflow and Java     
Version 8'</a></li>
<li><a href="/Training/Squirrel_Database_Tool_-
_Installation_and_Documentation">'ALIP TS Squirrel Documentation'</a></li>
<li><a href="/03_Training/Eclipse_Workbench_Installation_Guide">'Eclipse 
Workbench Installation Guide'</a></li>
</ul>
</div>

<div class="tab-content1-block">
<div class="home-subheading">'Actuarial Analyst Training'</div>
<ul style="list-style: none;">
<li><a     
href="/03_Training/ALIP_Product_Documentation_and_Training_Outline">'ALIP 
Product Documentation and Training Outline'</a></li>
<li><a href="/03_Training/Onshore_Training_Approach_-_Actuaries">'Onshore 
Training Approach - Actuaries'</a></li>
<li><a href="/03_Training/Self-Guided_Product_Training_Agenda">'Self Guided 
Product Training Agenda'</a></li>
</ul>
</div>

<div class="tab-content1-block">
<div class="home-subheading">'Business Analyst Training'</div>
<ul style="list-style: none;">
<li><a href="/03_Training/Overview">'Overview'</a></li>
<li><a href="/03_Training/Exercises">'Exercises'</a></li>
<li><a href="/03_Training/Policy_Administration">'Policy Administration'</a>   
</li>
<li><a href="/@api/deki/files/2729/Defect_Management_using_RTC.pptx?
origin=mt-web">'Defect Management'</a></li>
<li><a href="/03_Training/Database_Training/">'Database Training'</a></li>
<li><a href="/03_Training/Functional_Specification">'Functional 
Specification'</a></li>
<li><a href="/Training/New_Business_and_Underwriting">'New Business and 
Underwriting'</a></li>
<li><a href="/03_Training/Business_Configuration_Training">'Business   
Configuration Training'</a></li>
<li><a href="/03_Training/Product_Configuration_Training">'Product 
Configuration Training'</a></li>
<li><a href="/03_Training/ALIP_Functional_Training_Outline">'ALIP Functional 
Training Outline'</a></li>
<li><a href="/03_Training/Onshore_Training_Approach_-_Business">'Onshore   
Training Approach - Business'</a></li>
</ul>
</div>

这个类有如下的CSS:

.home-tab-title {
 width: 100%;
 height: 65px;
 padding: 10px 0 10px 0;
 }

 img.home-duck{
 width: 35px;
 float: left;
 padding: 12px 10px 0 0;
 }

 .home-heading {
 display:block;
 float: left;
font-size: 22px;
margin-top: 20px;
margin-bottom: 20px;
clear: right;
font-family: "Segoe UI", arial, sans-serif;
}

.home-subheading {
 margin-top:10px;
 margin-bottom:10px;
 }

.home-subheading{
font-size:15px;
color: #000;
font-weight: 500;
font-family: "Segoe UI", arial, sans-serif;;
display: inline-flex;
}

.tab-content1 {
margin-left: 2.2em;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
min-width: 40px;
}

.tab-content1-block {padding: 0 5em 1em .5em;}
.tab-content1-block ul li {margin-bottom:10px; margin-left:-22px;}

输出显示如下:

我有一个带有大量 ul 的第二个类。我想将它分成三列，并希望它们恰好在第一列的 uls 下方对齐。

 <div class="tab-content1-block1">
 <div class="home-subheading">'Business Configurator Training'</div>
 <ul style="list-style: none;">
 <li><a href="/@api/deki/files/3170/BC_Exercise.zip?origin=mt-web">'BC   
 Exercise'</a></li>
 <li><a href="/03_Training/ALIP_Configuration_Tips">'ALIP Configuration 
 Tips'</a></li>
 <li><a href="/@api/deki/files/3161/Understanding_ALIP_Business_Config_-
 _Introduction.pptx?origin=mt-web">'ALIP Business Config - Introduction'</a>  
 </li>
<li><a href="/@api/deki/files/3159/Understanding_ALIP_Business_Config_-
 _Common_Admin.pptx?origin=mt-web">'ALIP Business Config - Common Admin'</a>    
</li>
<li><a href="/@api/deki/files/3160/Understanding_ALIP_Business_Config_- 
_Forms.pptx?origin=mt-web">'ALIP Business Config - Forms'</a></li>
<li><a href="/@api/deki/files/3162/Understanding_ALIP_Business_Config_-
_Lookup.pptx?origin=mt-web">'ALIP Business Config - Lookup'</a></li>
 <li><a href="/@api/deki/files/3165/Understanding_ALIP_Business_Config_-
 _Rules.pptx?origin=mt-web">'ALIP Business Config - Rules'</a></li>
 <li><a href="/@api/deki/files/3169/Understanding_ALIP_Business_Config_-
 _Workflow.pptx?origin=mt-web">'ALIP Business Config - Workflow'</a></li>
 <li><a href="/@api/deki/files/3163/Understanding_ALIP_Business_Config_-
 _Page_Group_Views.pptx?origin=mt-web">'ALIP Business Config - Page Group   
 Views'</a></li>
 <li><a href="/@api/deki/files/3164/Understanding_ALIP_Business_Config_-  
 _Page_Groups.pptx?origin=mt-web">'ALIP Business Config - Page Groups'</a>
 </li>
 <li><a href="/@api/deki/files/3166/Understanding_ALIP_Business_Config_-
 _Schema_Mgmt.pptx?origin=mt-web">'ALIP Business Config - Schema Mgmt'</a>
 </li>
 <li><a href="/@api/deki/files/3167/Understanding_ALIP_Business_Config_- 
 _Skills_Check.pptx?origin=mt-web">'ALIP Business Config - Skills Check'</a> 
 </li>
 <li><a href="/@api/deki/files/3168/Understanding_ALIP_Business_Config_-
 _Tabbed_Workflow.pptx?origin=mt-web">'ALIP Business Config - Tabbed 
 Workflow'</a></li>
 <li><a 
 href="/@api/deki/files/3158/ALIP_Business_Configuration_Training_2008.ppt?  
 origin=mt-web">'ALIP Business Configuration Training 2008'</a></li>
 <li><a  

 href="/03_Training/ALIP_Functional_and_Business_Configuration_
 Training_Outline">
'ALIP Functional and Business Configuration Training Outline'</a></li>
<li><a href="/03_Training/Onshore_Training_Approach_-_Business">'Onshore   
 Training Approach - Business Configurator'</a></li>
</ul>
</div>

这个类的CSS代码如下

 .tab-content1-block1 {padding: 0 5em 1em 5em;}
 .tab-content1-block1 ul li {margin-bottom:10px; margin-left:-22px;}

 .tab-content1-block1 ul 
 {
 -moz-column-count: 3;
 -moz-column-gap: 20px;
 -webkit-column-count: 3;
 -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
  }

输出结果如下，对齐方式好像不太对。它应该正好在第一个图中的列下方。

有人可以帮忙解决这个问题吗？如果有任何帮助，我们将不胜感激？

Answer 1

我已经更新了我的笔以匹配您的屏幕截图:http://codepen.io/memoblue/pen/XKGXAN

给你:

.tab-content1 {
  display: flex;
  flex-wrap: wrap;
  > div:not(.tab-content1-block1) {
    flex-basis: 33.3333%;
  }
}

.tab-content1-block1 {
    flex-basis: 100%;
  > ul {
    display: flex;
    flex-wrap: wrap;
    > li {
      flex-basis: 33.3333%;
    }
  }
}

注意:它使用的是 SCSS，我没有添加浏览器前缀以使其更易于阅读……如果有任何不清楚的地方，请告诉我。