html - 列表元素在 2 列中水平对齐

Question

我正在尝试创建一个 2 列的无序列表。我的列表项将包含标签，因为我想跳转到带有此列表的文章内容。关于如何让它工作的任何想法？

这是我目前拥有的代码的 JS Fiddle。 https://jsfiddle.net/mithrawn/od0kaw6y/

<section class="index-list">
  <h4> In this article</h4>
  <ul>
    <li><a href="#add">Add Contact</a></li>
    <li><a href="#edit">Edit Contact</a></li>
    <li><a href="#delete">Delete Contact</a></li>
  </ul>
</section>

.index-list { 
  background: #F9FAFA; 
  border-left: 4px solid #AAAEB7;
  margin: 3em 0; 
  padding: 15px 0px;

}

.index-list li {
    list-style: none;
    float: left;    
    margin: 0.7em 25px 0em 0;
    width: 100%;
}

这是我想要得到的效果。

Answer 1

使用列计数

The column-count CSS property breaks an element's content into the specified number of columns.

MDN

.index-list { 
  background: #F9FAFA; 
  border-left: 4px solid #AAAEB7;
  margin: 3em 0; 
  padding: 15px 0px 15px 20px;

}

.index-list ul {
  width: 100%;
  padding: 0;
  margin: 0;
  column-count: 2;
}

.index-list li {
    list-style: none;
    margin: 0;
}

.index-list li a {
  display: block;
  text-decoration: none;
}

<section class="index-list">
  <h4> In this article</h4>
  <ul>
    <li><a href="#add">Add Contact</a></li>
    <li><a href="#edit">Edit Contact</a></li>
    <li><a href="#delete">Delete Contact</a></li>
    <li><a href="#add">Add Contact 1</a></li>
    <li><a href="#edit">Edit Contact 1</a></li>
    <li><a href="#delete">Delete Contact 1</a></li>
    <li><a href="#add">Add Contact 2</a></li>
    <li><a href="#edit">Edit Contact 2</a></li>
    <li><a href="#delete">Delete Contact 2</a></li>
  </ul>
</section>