Html 在两列中列出项目水平对齐

我正在尝试创建一个2列无序列表。我的列表项将包含标记，因为我想使用此列表跳转到文章内容。有什么办法让它工作吗

下面是我目前拥有的JS代码

本文





.索引列表{
背景：#F9FAFA；
左边框：4px实心#AAAEB7；
保证金：3em0；
填充：15px 0px；
}
.索引列表李{
列表样式：无；
浮动：左；
保证金：0.7em25px 0em0；
宽度：100%；
}

这就是我想要得到的效果

---

使用代码片段！查看flexbox以了解此类内容。这真的很容易

#节{
显示器：flex；
}
.索引列表{
背景：#F9FAFA；
左边框：4px实心#AAAEB7；
保证金：3em0；
填充：15px 0px；
}
.索引列表李{
列表样式：无；
浮动：左；
保证金：0.7em25px 0em0；
宽度：100%；
}

本文中的

为了在不调整标记的情况下执行此操作，请使用flex box！将列表设置为带换行符的列flex，并确保列表项是

display:block然后，只要列表的高度设置为“换行”，它就可以正常工作


。索引列表{
背景：#F9FAFA；
左边框：4px实心#AAAEB7；
保证金：3em0；
填充：15px 0px；
}
.索引列表{
显示器：flex；
柔性流：柱包裹；
高度：150像素；
}
.索引列表李{
列表样式：无；
浮动：左；
保证金：0.7em25px 0em0；
显示：块；
/*宽度：100%；使用
列计数

column count CSS属性将元素的内容拆分为指定数量的列



索引列表{
背景：#F9FAFA；
左边框：4px实心#AAAEB7；
保证金：3em0；
填充：15px 0px 15px 20px；
}
.索引列表{
宽度：100%；
填充：0；
保证金：0；
列数：2；
}
.索引列表李{
列表样式：无；
保证金：0；
}
.索引列表李a{
显示：块；
文字装饰：无；
}

本文











编辑您的JSFIDLE：不，不是一个真正干净的解决方案。使用flexbox，您将有更多的位置控制有趣的是，op实际上并没有这样或那样说。看起来是一个糟糕的设计（imo）。另一种方式更具可扩展性。
。列数：2
？Adrian，我会尝试使用它。我知道这不是最佳的，但我认为这可能只适合我非常奇怪的需要。谢谢。我想他正在尝试将单个
元素包装到第二列中，而不是使用两个列表。不幸的是，这不起作用，因为我需要将“在本文中”放在灰色框中。我也不想创建两个
。我上面包含的图像在某种程度上是在没有一个
的情况下完成的。很容易在本文中放置您需要的内容。一个ul只是糟糕的设计（imo）.扩展性不强，可能更难做出响应。我同意，但由于我们的软件，我有点受限partners@DCR使用单一的
有什么不好？这种方法在语义上更有效。这种方法需要固定的高度。我对flex box的痴迷和避免媒体查询的自我挑战让我看不到像这样简单的解决方案！就像flex box一样，通过简单的
@media
规则轻松做出响应，而且要简单得多。+1
<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%;
}