HTML ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅に合わない

受付中

質問者：kurobon619
質問日時：2024/07/26 18:56
回答数：2件

ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅700pxに合いません。
どうしたらいいでしょういか？　700pｘの背景画像を入れてもだめです。

https://nihonjinji.jp/index.php/servicemuke/
HTML
<ul class="umuke">
<li>研修コース
</li>
<li ><a href="https://nihonjinji.jp/index.php/kangomuke/"><訪問介護サービス事業向け
</li>
<li><a href="https://nihonjinji.jp/index.php/eventmuke/"><イベントプロデュース企業向け</a>
</li>
<li ><a href="https://nihonjinji.jp/index.php/servicemuke/"><サービス事業向け</a>
</li>

</ul>

CSS
ul.umuke {
list-style:none; margin: 0 auto;
padding: 0px;
width: 700px;
color: #ffffff;
/*background: #03006b;背景色*/
background-image: url(images/var_muke.jpg);
}
ul.umuke li{
float: left;
background: #03006b;/*背景色*/
color: #ffffff;
margin-bottom: 3px;/*下のバーとの余白*/
border-bottom: solid 1px #dadada;/*下に灰色線*/
list-style-type: none!important;/*ポチ消す*/
text-align: left;
padding-left: 10px;
padding-right: 5px;
line-height: 30px;
vertical-align: middle;
}

ul.umuke a {
color: #ffffff;
}

ul.umuke a :hover{
color: #ffff00;
}

通報する

質問の本文を隠す

画像を添付する（ファイルサイズ：10MB以内、ファイル形式：JPG/GIF/PNG）
今の自分の気分スタンプを選ぼう！

あと4000文字

回答を確認する

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2024/07/26 22:25

こんばんは

floatでレイアウトしているのが原因ですね。
float指定された要素は通常フローから外れます。
(position: absolute とは扱いが異なりますが・・）

ulのCSSに
　border: 1px solid red;
などを加えてみれば、何が起きているかを確認できると思います。
（ulの高さが無いことがわかるはず）

また、スペースで間隔調整をしているようですがあまり戴けません。
各項目を同じ幅にしたければ、liの幅を指定して文字位置を中央にするなどが良いと思います。

項目幅は内包する文字数に応じて成り行きで、間隔だけを揃えたいような場合には、以下に示すような例でも良いでしょう。
・liの合計幅が親要素に満たなければ、間隔をあけて均等に割り付けられます。
・親要素幅を超える場合は納まるように適宜幅が縮められます。
（細かな指定も可能ですが、検索してみてください。）

flexレイアウトの場合であれば、フローから外れることはないので、ulに幅と背景色を指定しておけばそのまま反映されます。
CSSを以下のような感じにすることで、ご予定のようなレイアウトになるのではないかと想像します。（直接関係のない部分は省略）

ul.umuke {
width: 700px;
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
background: #03006b;
}
ul.umuke li {
text-align: center;
margin: 0 5px;
}
ul.umuke li, ul.umuke a {
color: white;
text-decoration: none;
}