右の余分なスペースが何故できてしまうのか。削除したい。

Question

画像を添付します。見づらいですが、リスト項目の右の余分なスペースです。最後のボーダーは、均等が可視化できるように、疑似クラスで消してはいません。

コード
  <header>
       <div class="header-list">
　　　　　<div class="header-container">
          <ul>
            <li>Home</li>
            <li>会社概要</li>
            <li>自社物件案内</li>
            <li>お問い合わせ</li>
            <li>採用情報</li>
          </ul>
        </div>
      </div>

    </header>

コード
.header-list {
  background-color: rgba(45,52,60,0.9);
  height: 4vw;
  width: 70%;
  position: absolute;
  top: 0;
  line-height: 4vw;
}

.header-list ul {
  margin: 0 auto;
  display: table-cell;
  padding: 0;
  width: 100%;
}

.header-list li {
  display: inline-block;
  color: white;
  cursor: pointer;
  width: 13vw;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);

}

Comments

[m.ts10806]

「HTTP」タグはどういう意図でつけられたのでしょうか
直接関係のないものでしたら削除するか「HTML」に換えたほうが適切に思います

Answer 1

.header-listがwidth: 70%;、.header-list liがwidth: 13vw;なので、70-15*5　> 0 ですから、すき間が空いてもおかしくないと思います。

解決方法は、.header-list liをwidth: 14vw;にすることですが、borderやinline-blockで生じるすき間も考慮する必要があります。

.header-list li {
  display: inline-block;
  color: white;
  cursor: pointer;
  width: 14vw; // 変更
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box; // 変更
}

として、

<li>Home</li><li>会社概要</li><li>自社物件案内</li><li>お問い合わせ</li><li>採用情報</li>

のように、改行を潰してください。

または、flexを使うのもおすすめです。

Comments

[kyoya0819]

勘違いでした

[RT2]

今回も丁寧にありがとうございます。
教えてもらった通りに、CSSを変更し、改行をつぶしましたが、採用情報だけ左下にきてしまうので、下の指摘にある通り、それを解決するためにもう少し踏ん張ってみます。

Answer 2

<header><div class="header-list"><div class="header-container"><ul><li>Home</li><li>会社概要</li><li>自社物件案内</li><li>お問い合わせ</li><li>採用情報</li></ul></div></div></header>

.header-list {
  background-color: rgba(45,52,60,0.9);
  height: 4vw;
  width: 70%;
  position: absolute;
  top: 0;
  line-height: 4vw;
}

.header-list ul {
  margin: 0 auto;
  display: table-cell;
  padding: 0;
  width: 100%;
}

.header-list li {
  display: inline-block;
  color: white;
  cursor: pointer;
  width: calc( 14vw - 1px );
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);

}

とりあえずこんなとこかな

サンプル

height 4vwはやめた方がいいと思う、

Comments

[kyoya0819]

削除したい。が一瞬 悲しい。に見えた自分がいる

Answer 3

.header-list ulのdisplayをflexにして
.header-list li の displayをblock、 widthを20%にしてはどうでしょう？

Comments

[RT2]

今回もありがとうございます。
display: flexにしたら直りました。
displayプロパティをもっと色々学びます。

Answer 4

• .header-container にmarginかpaddingがある、box-sizingの指定が間違っている
• .header-list li の幅 13vw * 5個分が、.header-list の幅 70% に満たない

ぱっと思いつくのはこんなところです

その不具合を直すために試したこともご教示いただかないと、丸投げの質問に見えますのでご注意ください。