如何在 <section> 标签中对齐列表？

Question

我对 Web 开发还很陌生，还有一些问题我可以自己解决。

我有这个代码：

HTML：

  <div id="column">

<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en"><a href="#">list A1</a></li>
<li class="en"><a href="#">list A2</a></li>
<li class="en"><a href="#">list A3</a></li>
<li class="en"><a href="#">list A4</a></li>
<li class="en"><a href="#">list A5</a></li>
</ul>
</section>
</div>

<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en"><a href="#">list B1</a></li>
<li class="en"><a href="#">list B2</a></li>
<li class="en"><a href="#">list B3</a></li>
<li class="en"><a href="#">list B4</a></li>
<li class="en"><a href="#">list B5</a></li>
</ul>
</section>
</div>
</div>

还有这个 CSS

     ul , li {
  list-style-type: none;
}

#column{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 200%;
  }

  #colunmA{

    }

 #colunmB{

    }

 #colunmC{

        }

我将 CSS 中的 #counmA 、 #counmB 和 #counmC 规则留空，因为我不知道在此处放置什么。

我想将属于每一列的所有元素对齐在一起。此外，C 列中的元素不会与其他列水平和垂直对齐。我想达到类似的结果：

这里是 JS 小提琴：https://jsfiddle.net/gdiop/s9w2ku8q/24/

Answer 1

您以有点错误的方式放置元素。 无需为 A、B、C 列制定单独的规则。始终尝试制定可以应用于 n 件事情的一般规则。

这是你更新的 JSfiddle Demo

我将浮动和边距属性添加到#column。

代码：

<div id="column">
  <div id="colunmA">
    <section>
      <h1 class="en">Column A</h1>
      <ul>
        <li class="en"><a href="#">list A1</a></li>
        <li class="en"><a href="#">list A2</a></li>
        <li class="en"><a href="#">list A3</a></li>
        <li class="en"><a href="#">list A4</a></li>
        <li class="en"><a href="#">list A5</a></li>
        <li class="en"><a href="#">list A6</a></li>

      </ul>
    </section>
  </div>
</div>

<div id="column">
  <div id="colunmA">
    <section>
      <h1 class="en">Column B</h1>
      <ul>
        <li class="en"><a href="#">list b1</a></li>
        <li class="en"><a href="#">list b2</a></li>
        <li class="en"><a href="#">list b3</a></li>
        <li class="en"><a href="#">list c5</a></li>
      </ul>
    </section>
  </div>
</div>

<div id="column">
  <div id="colunmA">
    <section>
      <h1 class="en">Column C</h1>
      <ul>
        <li class="en"><a href="#">list c1</a></li>
        <li class="en"><a href="#">list c2</a></li>
        <li class="en"><a href="#">list c3</a></li>
      </ul>
    </section>
  </div>
</div>

ul,
li {
  list-style-type: none;
}

#column {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 200%;

  float:left;
  margin-left:10px;
}

#colunmA {}

#colunmB {}

#colunmC {}

Answer 2

这是基于我提供的 cmets。请注意，css 非常简单，相同的类适用于所有列 A、B、C。我使用 class 而不是 id 来简化代码：

ul , li {
  list-style-type: none;
  padding-left: 2px;
}

.columns {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.colunmItem { /* same class for columnA,B,C */
  display: inline-block;
  text-align: left;
  vertical-align: top;
  line-height: 300%; /* control line spacing for list items */
  margin:0 5%;
}

<div class="columns">

  <div class="colunmItem">
    <section>
      <h1 class="en">Column A</h1>
      <ul>
        <li class="en"><a href="#">list A1</a></li>
        <li class="en"><a href="#">list A2</a></li>
        <li class="en"><a href="#">list A3</a></li>
        <li class="en"><a href="#">list A4</a></li>
        <li class="en"><a href="#">list A5</a></li>
      </ul>
    </section>
  </div>

  <div id="colunmB" class="colunmItem">
    <section>
      <h1 class="en">Column B</h1>
      <ul>
        <li class="en"><a href="#">list B1</a></li>
        <li class="en"><a href="#">list B2</a></li>
        <li class="en"><a href="#">list B3</a></li>
        <li class="en"><a href="#">list B4</a></li>
        <li class="en"><a href="#">list B5</a></li>
      </ul>
    </section>
  </div>

  <div id="colunmC" class="colunmItem">
    <section>
      <h1 class="en">Column C</h1>
      <ul>
        <li class="en"><a href="#">list C1</a></li>
        <li class="en"><a href="#">list C2</a></li>
        <li class="en"><a href="#">list C3</a></li>
      </ul>
    </section>
  </div>


</div>

Answer 3

首先从#column 选择器中移除 align-items: center; 然后您可以添加到每个列选择器边距：0 20px； 用于在列之间留出空间。

ul{
  padding:0;
}
ul,
li {
  list-style-type: none;
}

#column {
  display: flex;
  justify-content: center;
  line-height: 200%;
}

#colunmA {
  margin: 0 20px;
}

#colunmB {
  margin: 0 20px;
}

#colunmC {
  margin: 0 20px;
}

<div id="column">

  <div id="colunmA">
    <section>
      <h1 class="en">Column A</h1>
      <ul>
        <li class="en"><a href="#">list A1</a></li>
        <li class="en"><a href="#">list A2</a></li>
        <li class="en"><a href="#">list A3</a></li>
        <li class="en"><a href="#">list A4</a></li>
        <li class="en"><a href="#">list A5</a></li>
      </ul>
    </section>
  </div>

  <div id="colunmB">
    <section>
      <h1 class="en">Column B</h1>
      <ul>
        <li class="en"><a href="#">list B1</a></li>
        <li class="en"><a href="#">list B2</a></li>
        <li class="en"><a href="#">list B3</a></li>
        <li class="en"><a href="#">list B4</a></li>
        <li class="en"><a href="#">list B5</a></li>
      </ul>
    </section>
  </div>

  <div id="colunm C">
    <section>
      <h1 class="en">Column C</h1>
      <ul>
        <li class="en"><a href="#">list C1</a></li>
        <li class="en"><a href="#">list C2</a></li>
        <li class="en"><a href="#">list C3</a></li>
      </ul>
    </section>
  </div>