我的第一堂课的页面上有以下代码。
<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下方精确对齐。
<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;
}
输出如下。对齐似乎不正确。它应该正好在第一个图中的列之下。
有人可以帮助解决此问题吗？任何帮助将不胜感激？
最佳答案
我已更新笔以匹配您的屏幕截图：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，我没有添加浏览器前缀以使其更易于阅读……如果有任何不清楚的地方，请告诉我。
关于html - 打破列中的UL(为清楚起见进行了编辑)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38972547/