列表项目水平 Alignment 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

使用column-count

column-count CSS 属性将元素的内容分成指定的列数。

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>

Answer 2

使用片段。 查看 flexbox 了解此类内容。 让它真的很容易

 #section{ display:flex; }.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%; }

 <h4> In this article</h4> <section id='section' class="index-list"> <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> <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>

Answer 3

为了在不调整标记的情况下执行此操作，请使用 flex-box，将列表设置为带有 wrap 的列 flex，并确保您的列表项是display: block; 然后只要你的列表设置了一个高度，它应该可以正常工作。

 .index-list { background: #F9FAFA; border-left: 4px solid #AAAEB7; margin: 3em 0; padding: 15px 0px; }.index-list ul { display: flex; flex-flow: column wrap; height: 150px; }.index-list li { list-style: none; float: left; margin: 0.7em 25px 0em 0; display: block; /* width: 100%; <-- Removed, otherwise they will push the next column off the right side */ } /* As a bonus: you can add this to make your links take up the full space: */.index-list a { display: block; } /* And this for some hover-y goodness: */.index-list a:hover { background-color: #E9EAEA; }

 <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</a></li> <li><a href="#edit">Edit Contact</a></li> <li><a href="#delete">Delete Contact</a></li> <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>

然后只需摆弄你的填充和边距，让你喜欢的东西间隔开:)