在 2 列中列出项目水平对齐答案

【问题标题】：List Items Horizontal Alignment in 2 Columns在 2 列中列出项目水平对齐
【发布时间】：2019-11-20 00:33:18
【问题描述】：

我正在尝试创建一个 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%;
}

这就是我想要得到的效果。

【问题讨论】：

编辑了你的 jsfiddle：jsfiddle.net/0q5acmLy
不，这不是一个真正干净的解决方案。使用 flexbox 你将有更多的布局控制
有趣，op 实际上并没有这样说。似乎是一个糟糕的设计（imo）。另一种方式更具可扩展性。
.column-count:2 ?
阿德里安，我会努力解决这个问题。我知道这不是最佳选择，但我认为这可能只满足我非常奇怪的需求。谢谢。

标签： html css list alignment

【解决方案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>

【讨论】：

我对 flex-box 和避免媒体查询的自我挑战的痴迷使我对这些简单的解决方案视而不见！就像使用简单的@media 规则来响应flex-box 一样简单，而且要简单得多。 +1

【解决方案2】：

使用sn-ps！查看 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>

【讨论】：

我认为他正在尝试将单个 <ul> 的元素包装到第二列中，而不是使用两个列表。
不幸的是，这不起作用，因为我需要“在本文中”位于灰色框中。我也不想创建两个
的情况下完成
很容易将在本文中放置在您需要的地方。一个 ul 只是糟糕的设计（imo）。不是很可扩展，并且可能更难以做出响应。
我同意，但由于我们的软件合作伙伴，我有点受限
@DCR 使用单个 <ul> 有什么不好？这种方式在语义上更有效。

【解决方案3】：

为了在不调整标记的情况下执行此操作，请使用弹性框！将您的列表设置为带有换行的列 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>

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

【讨论】：

此方法需要固定高度。