Question

我目前正在使用CSS列，为无序列表创建2列布局。这是代码：

HTML

<div class="meta-data">
   <ul> 
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here </li>        
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
  </ul>
</div>

CSS

.meta-data ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

这很好。但是，如果li内容中的任何一条包含在两行或更多行上，它将抛出第二列项目符号点，因此它们不会全部水平排列...

例如：

Case Studies:  This goes onto       Value:  Value Here
two lines
                                    Programme Duration:  Duration here.
Sector:  Sector here. 
                                    Current Status:  Current Status here.
Client:   Client Here

这看起来很乱。

我希望它显示为：

Case Studies:  This goes onto       Value:  Value Here
two lines

Sector:  Sector here.               Programme Duration:  Duration here.

Client:   Client Here               Current Status:  Current Status here.

使用CSS列设置很容易做到这一点，还是我需要用一种差异方式重新编码？

Answer 1

我看不到使用列属性执行此操作的方法，可以使用css grid

.meta-data ul {
    display:grid;
    grid-template-columns: 300px 300px;
    grid-column-gap:10px;
}

<div class="meta-data">
   <ul> 
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here Case Study HereCase Study</li>        
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here  </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here         </li>
  </ul>
</div>

UL CSS列-对齐列的高度以匹配多行

1 个答案: