cssで改行により崩れたレイアウトの揃え方がわかりません

###前提・実現したいこと
cssのレイアウトを練習しているものです。
初歩的な質問でございますが、ご協力お願いいたします。
inlineーblock要素を揃えて並べたいです。
###発生している問題・エラーメッセージ

質問の意図が簡単に伝わると思いますので、お手数ですが私のコードを一度プラウザで表示していただけませんか
1列目のようにレイアウトを組みたいのですが、
2列目のように改行するにあたり、レイアウトがずれてしまいます。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
#tem{
  border: 1px black solid;
}
.about{
  text-align:center;
  font-size:14px;
  background-color:#4200B7;
  color:#fff;
  width:105px;
  height:55px;
  padding-top: 4px;
  display:inline-block;
}
.about:hover{
  opacity: 0.8
}

</style>
</head>
<body>
  <ul id="tem">
    <li class="about">コンテンツ</li>
    <li class="about">コンテンツ</li>
    <li class="about">コンテンツ</li>
    <li class="about">コンテンツ</li>
    <li class="about">コンテン</li>
    <li class="about">コンテンツ</li>
    <li class="about">コンテンツ</li>
  </ul>
<ul id="tem">
  <li class="about">コンテンツ</li>
  <li class="about">コンテンツ</li>
  <li class="about">コンテンツ</li>
  <li class="about">コンテンツ1・コンテ</li>
  <li class="about">コンテン・ツコンテ</li>
  <li class="about">コンテンツ</li>
  <li class="about">コンテンツコンテ</li>
</ul>
<ul id="tem">
  <li class="about"><br>コンテンツ</li>
  <li class="about"><br>コンテンツ</li>
  <li class="about"><br>コンテンツ</li>
  <li class="about">コンテンツ1・コンテ</li>
  <li class="about">コンテン・ツコンテ</li>
  <li class="about"><br>コンテンツ</li>
  <li class="about">コンテンツコンテ</li>
</ul>


</body>
</html>

###試したこと
とりあえず改行を入れたらそれとなく揃ったの(3列目)でしばらく放置していたのですが、曖昧なところを潰していきたいです。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2016/10/16 14:41

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「1回目」「2回目」とは何のことでしょうか。

行動規範の内容に同意します

回答3件

ベストアンサー

CSS
1.about{
2  text-align:center;
3  font-size:14px;
4  background-color:#4200B7;
5  color:#fff;
6  width:105px;
7  height:55px;
8  padding-top: 4px;
9  display:inline-block;
10  vertical-align: top;/*追加*/
11}

これで1〜3行目まですべて同じ状態となります。

inline-blockの場合、vertical-alignの初期値がbaselineになっています。
テキストを綺麗に一列に並べる際には、フォントの「ベースライン」の位置を揃えて並べるのが決まりであるため、
初期値がそのようになっています。※参考：フォント設計の詳細について

フォントであればbaselineに沿って並べるのが最も美しいのですが、これがボックス状のオブジェクトになると、
baselineで揃えるとボックスの大きさなどによって上端／下端の位置が上下にズレてしまうことになります。
そこで、vertical-alignによって「上揃え（top）」「下揃え（bottom）」「中央揃え（middle）」などの値に変更することで、ボックス状のオブジェクトを美しく整列させることができるようになります。

上記のサンプルコードではtopとしていますが、横に並べたボックスのどこに合わせて揃えたいのかによって
値を変更してやると良いと思います。その際、各ボックスの高さを変えてやると、どこに揃っているのかがわかりやすいので、試してみると良いでしょう。

投稿2016/10/16 16:27

aKusano

総合スコア3763

abouch

2016/10/17 00:59

ご丁寧な説明ありがとうございます。他サイトで調べる手間が省けました。

行動規範の内容に同意します

vertical-align に top middle bottom text-top text-bottom のいずれかを指定すればよいです。

CSS
1.about {
2	/* vertical-align: baseline; 規定値が baseline なので何も指定しないと baseline を選択したのと同じ描画になる */
3	vertical-align: top; /* middle bottom text-top text-bottom のいずれかでも可 */
4}
5```**動くサンプル：**[https://jsfiddle.net/so2tvr39/](https://jsfiddle.net/so2tvr39/)
6
7---
8
9また、同じ名前の id属性を複数使っていますが、HTMLの文法上 1ページ内において id属性は重複できません。使われている状況から class属性にするのが妥当だと思います。

投稿2016/10/16 16:14

kei344

総合スコア69625

abouch

2016/10/17 00:58

早急な回答ありがとうございます。知らないプロパティーだったので助かります。 id重複には気をつけます

行動規範の内容に同意します

同一のidが複数あるのがちょっと気になりますね。
複数指定するならclassにすべきです。

temをclassにするとして、temクラスのdisplayプロパティの値ををflexにしてください。

css
1.tem{
2  ...
3  display: flex;
4}
5.about{
6  ...
7  margin: 0 2px;
8}

これでレイアウトがきれいになるはずです。
flex-directionプロパティやflex-wrapプロパティなど便利な機能が沢山あります。
safari対応にはもう一文付け加える必要があります。
参考サイト：
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

投稿2016/10/16 16:32