如何使这些列表项适合列

Question

我想知道如何在列中对齐列表项及其边框。我不知道如何声明列高，或者我的 html 或 css 的编写方式是否应该有另一个版本，因此我们将不胜感激。

        <div class="content">
            <ul>
                <a href="https://www.coursera.org/"><li>Coursera</li></a>
                <a href="https://developer.mozilla.org/en-US/"><li>MDN Web Docs</li></a>
                <a href="https://www.freecodecamp.org/learn/"><li>FreeCodeCamp</li></a>
                <a href="https://whosebug.com/"><li>Stack Overflow</li></a>
                <a href="https://www.w3schools.com/"><li>W3 Schools</li></a>
                <a href="https://www.jsfiddle.net/"><li>jsfiddle</li></a>
            </ul>
        </div>

            .content
            {
                column-count:3;
                column-width:140px;
                column-gap: 30px;
                column-rule:solid 1px gray;
            }
            .content a
            {
                display:flex;
                flex-direction:column;
                list-style-type: none;
                border:1px inset black;
                background-color:lightgray;
                margin:5px auto;
                height:35px;
                width:120px;
                padding:5px;
                border-radius:3px;
            }
            .content li
            {
                text-align:center;

                font-family:sans-serif;
            }

Image of the problem

Answer 1

将 margin: 0 添加到 <ul> 标签。
将 .content a 边距从 5px auto 修改为 0 auto 5px;

ul {
  margin: 0;
}

.content {
  column-count: 3;
  column-width: 140px;
  column-gap: 30px;
  column-rule: solid 1px gray;
}
.content a {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  border: 1px inset black;
  background-color: lightgray;
  margin: 0 auto 5px;
  height: 35px;
  width: 120px;
  padding: 5px;
  border-radius: 3px;
}
.content li {
  text-align: center;

  font-family: sans-serif;
}

<div class="content">
  <ul>
    <a href="https://www.coursera.org/"><li>Coursera</li></a>
    <a href="https://developer.mozilla.org/en-US/"><li>MDN Web Docs</li></a>
    <a href="https://www.freecodecamp.org/learn/"><li>FreeCodeCamp</li></a>
    <a href="https://whosebug.com/"><li>Stack Overflow</li></a>
    <a href="https://www.w3schools.com/"><li>W3 Schools</li></a>
    <a href="https://www.jsfiddle.net/"><li>jsfiddle</li></a>
  </ul>
</div>

结果：

Answer 2

这是另一种方法，我还固定了标签的顺序。

.content {
  font-family: sans-serif;
}

.content ul {
  column-count: 3;
  column-rule: 1px solid gray;
  list-style-type: none;
  padding: 0;
}

.content li {
  display: flex;
}

.content a {
  background-color: lightgray;
  border: 1px inset black;
  border-radius: 3px;
  margin: 0.25rem 0;
  padding: 0.25rem;
  text-align: center;
  width: 100%;
}

<div class="content">
  <ul>
    <li><a href="https://www.coursera.org/">Coursera</a></li>
    <li><a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a></li>
    <li><a href="https://www.freecodecamp.org/learn/">FreeCodeCamp</a></li>
    <li><a href="https://whosebug.com/">Stack Overflow</a></li>
    <li><a href="https://www.w3schools.com/">W3 Schools</a></li>
    <li><a href="https://www.jsfiddle.net/">jsfiddle</a></li>
  </ul>
</div>

如何使这些列表项适合列

How to make these list items fit inside the column

html

css

multiple-columns