我有一个包含八个项目的列表,我想将它集中在三列及其内容中,以便单词与第一行和第二行对齐。实现它的最佳方法是什么?我已尝试过百分比,但内容仍然不对。
body{
margin: 0;
padding: 0;
}
.wk_search-resume-list {
width: 100%;
overflow: auto;
}
.wk_search-resume-list li {
margin-bottom: 16px;
font-size: 14px;
position: relative;
width: 33%;
display: inline-block;
vertical-align: top;
text-align: center;
}
.wk_search-resume {
background-color: white;
border: 1px solid #bfbfbf;
margin: 32px 16px;
padding: 24px 24px 8px 24px;
font-size: 0;
position: relative;
}
.wk_search-resume-list strong {
display: block;
}
.wk_search-resume-list.wk-interval {
margin-top: 32px;
border: 1px solid red;
padding: 0;
}
<ul class="wk_search-resume-list wk-interval">
<li class="wk_search-resume-list--procedure">Tipo de procedimiento <strong>Procedimiento ordinario</strong></li>
<li class="wk_search-resume-list--subvoice">Subvoz <strong>Extinción y suspensión del arrendamiento</strong></li>
<li class="wk_search-resume-list--favor">A favor <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--year">Año <strong>1992</strong></li>
<li class="wk_search-resume-list--resource">Tipo de recurso <strong>Procedimiento</strong></li>
<li class="wk_search-resume-list--against">En contra <strong>Arrendatario</strong></li>
<li class="wk_search-resume-list--judgment">Sentido del fallo <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--judgment">Argumentos legales <strong>Crédito bancario</strong></li>
</ul>
注意:
答案 0 :(得分:1)
我仍然不清楚你想如何划分8个项目,但这里有一个基本的例子,展示了CSS Grid和Flexbox的可能性。
ul{
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
li{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
答案 1 :(得分:0)
最后,我用flexbox解决了这个问题。
容器:
display: flex;
justify-content: space-around;
flex-wrap: wrap;
内容:
flex-grow: 1;
width: 33%;
内容的最后一个孩子(为了将其放在左侧):
flex-grow: 80;