li要素の間の縦線が横にずれてしまう

Question

###実現したいこと
li要素が横並びになっていて、その間にグレーの縦線が入っているようなタイムテーブル
###問題点
ul要素に.rowというクラスを指定し、span要素で文字を太くしているのですが、li要素の間にあるボーダーの縦がそろわない

該当のソースコード

        <ul>
            <ul class="row">
              <li>9:30</li>
              <li>	受付開始</li>
            </ul>
            <span><ul class="row">
              <li>10:00</li>
              <li>	ヨガレッスン開始</li>
            </ul></span>
            <ul class="row">
              <li>11:15</li>
              <li>	ヨガレッスン終了</li>
            </ul>
            <ul class="row">
              <li>11:35</li>
              <li>	フード・ドリンク提供開始</li>
            </ul>
            <span><ul class="row">
              <li>12:30</li>
              <li>	終了</li>
            </ul></span>

/* 横並びリスト */
.row li{
  display:inline-block;
}
.row li:first-of-type{
  color:#803333;
  border-right:#ddd solid 2px;
  margin:0 0 5px 10%;
  padding-right:5%;
}
.row li{
  line-height:30px;
  font-size:15px;
  vertical-align:center;
}

Answer 1

HTML の構文的に問題のある箇所を修正し、各リスト項目に width プロパティを設定することで、質問者さんの実現したいことは行なえると思います(動作確認用リンク)。

<ul>
  <li>
    <ul class="row">
      <li>9:30</li>
      <li> 受付開始</li>
    </ul>
  </li>
  <li>
    <div>
      <ul class="row">
        <li>10:00</li>
        <li>    ヨガレッスン開始</li>
      </ul>
    </div>
  </li>
  <li>
    <ul class="row">
      <li>11:15</li>
      <li> ヨガレッスン終了</li>
    </ul>
  </li>
  <li>
    <ul class="row">
      <li>11:35</li>
      <li> フード・ドリンク提供開始</li>
    </ul>
  </li>
  <li>
    <div>
      <ul class="row">
        <li>12:30</li>
        <li>    終了</li>
      </ul>
    </div>
  </li>
</ul>

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.row li {
  display: inline-block;
}

.row li:first-of-type {
  color: #803333;
  border-right: #ddd solid 2px;
  margin: 0 0 5px 10%;
  padding-right: 5%;
  width: 4em;
}

.row li {
  line-height: 30px;
  font-size: 15px;
  vertical-align: center;
}

Comments

[takuma1217]

思っていた通りのレイアウトができました！ありがとうございます！
widthを設定するとうまくいったのですが、今回レイアウトがずれたのはどういった原因によるものなのかあまり理解ができておりません
もしよろしければ、原因を教えていただきたいです！

[s8_chu]

「受付開始」という項目の `li` 要素の 9:30 は半角 4 文字分の横幅で、それ以外の項目の 10:00 や 11:35 は 5 文字分の横幅です。
ここで、「受付開始」という項目の `li` 要素は、 1 文字分の横幅だけ他の `li` 要素よりも横幅が狭いことになるため、その分だけ線の位置がずれていました。

そのため、最初の `li` 要素の 9:30 を 09:30 とすることでも、この線のずれは解決します。

Answer 2

ul要素の直下にulやspanはおけません

Comments

[takuma1217]

ご指摘ありがとうございます！

Answer 3

HTML構文的にNGな点があります。

• htmllint

---

HTMLの正規化が先ですね。
これではCSSも正しく効かないのでは。

Comments

[takuma1217]

ご指摘ありがとうございます！
文章構造についての知識も取り入れていこうと思います！