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

Question

我对网络开发还很陌生，我仍然可以解决一些问题。

我有这段代码：

HTML：

Commands

和这个CSS

  <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中的规则#colunmA，＃colunmB和#colunmC留空了，因为我不知道该放什么。

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

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

Answer 1

您正在以错误的方式放置元素。 无需为A，B，C列制定单独的规则。总是试图制定一般规则，这些规则可以应用于n个事物。

这是你更新的JSfiddle Demo

我将float和margin属性添加到#column。

CODE：

<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

首先从#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>

Answer 3

这是基于我提供的评论。请注意，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>