<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のルール#colunmA、#colunmBと#colunmCを左

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

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

    #colunmA{ 

    } 

#colunmB{ 

    } 

#colunmC{ 

     } 

このCSSここに何を入れるべきかを知っている。

各列に属するすべての要素をまとめて整列したいと思います。また、列Cの要素は、他の列と水平および垂直に整列しません。私は、同様の結果を達成したいと思います：ここ

JSフィドル：https://jsfiddle.net/gdiop/s9w2ku8q/24/

Answer 1

あなたは少し間違った方法であなたの要素を配置しています。 列A、B、Cに対して別々のルールを作成する必要はありません。 n個のものに適用できる一般的なルールを作るよう常に試みてください。ここで

がJSfiddle Demo

を更新YOUTされ、私は#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

まずALIGN-アイテム#columnセレクタから削除：センター; 次に、各列のセレクタ余白に0を追加できます。 列間にスペースを入れます。

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

これは、私が提供する意見に基づいています。

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>