Question

我有一个包含八个项目的列表，我想将它集中在三列及其内容中，以便单词与第一行和第二行对齐。实现它的最佳方法是什么？我已尝试过百分比，但内容仍然不对。

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>

注意：

此信息为dinamic，如果只有一个项目，则此信息应以屏幕为中心。
如果某个项目被删除，则必须将该项目替换为列表中的下一个项目。

Answer 1

我仍然不清楚你想如何划分8个项目，但这里有一个基本的例子，展示了CSS Grid和Flexbox的可能性。

JS BIN example

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;
}

Answer 2

最后，我用flexbox解决了这个问题。

容器：

display: flex;
justify-content: space-around;
flex-wrap: wrap;

内容：

flex-grow: 1;
width: 33%;

内容的最后一个孩子（为了将其放在左侧）：

flex-grow: 80;

居中三列并将其内容居中

2 个答案: