cssで、リストを横並びにすると位置がズレる

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/style.css">
7    <title>Document</title>
8</head>
9<body>
10    <nav>
11    
12        <div class="logo-area">
13         <img src="./images/staba.jpeg" alt="" class="logo" />
14        </div>
15            <div class="nav-links">
16                <ul>
17                  <li><a href="">Home</a></li>
18                  <li><a href="">Detail</a></li>
19                  <li><a href="">Shop</a></li>
20                  <li><a href="">Contact</a></li>
21                </ul>
22            </div>
23    </nav>
24</body>
25</html>

CSS
1.logo-area{
2    display: inline-block;
3    margin-right: 1000px;
4
5}
6.nav-links{
7    display: inline-block;
8
9}
10nav{
11    width: 100%;
12    background-color: rgba(226, 43, 156, 0.547);
13    text-align: center;
14    justify-content: center;
15}

このコードでnav-linksのリストを横並びにしたいのですが、下記のプロパティを当てるとレイアウトが崩れてしまいます。

.nav-links ul li{
display: inline-block;
}
.nav-links ul li{
float: left;
}

画像とリストは同じ位置のまま、navに指定した領域（色付けした領域）の中央でリストを横並びにしたいのです。この場合どう記述すれば良いでしょうか？
また後学のために、レイアウトが崩れてしまう理由も教えていただけると幸いです。

お察しの通り当方初学者ですので、何卒よろしくお願い致します。

hatena19

2023/06/29 00:50

『画像とリストは同じ位置のまま』とは何を基準に同じ位置なのですか。『navに指定した領域（色付けした領域）の中央』とは水平方向、垂直方向での中央ということですか。言葉で説明するのが難しければ、画像をアップしてもらえますか。

hatena19

2023/06/29 00:53

あと、.logo-areaに異様に大きい右マージン(margin-right: 1000px;)を設定してますか、これはどのよう意図ですか。

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

回答2件

やりたいことはこれですかね？

css
1        .logo-area {
2            display: inline-block;
3            margin-right: 1000px;
4            vertical-align: middle; /* 追加 */

なお、float や inline-block を使って横並びにするのは、まったくお勧めできない書き方なので、以下をご参考にしていただければと思います。

float は使うな | 初心者向けCSSべからず集・すべし集 - Qiita
inline-block は使うな | 初心者向けCSSべからず集・すべし集 - Qiita

また後学のために、レイアウトが崩れてしまう理由も教えていただけると幸いです。

inline-block はブロックレベル要素を大きな文字のように扱うものです。文字として扱うので、xという文字とyという文字を並べると、xyとなるように横並びになります。
ところで、xyは文字の一番下がズレていると思いませんか？　これはベースライン揃えという揃え方になっているからです。以下のページがわかりやすいと思います。
CSSのテキストのベースライン（baseline）とは？ | Qumeruマガジン

そういうわけで、縦に並んだリストを横に並べると、その親の inline-block のベースラインが変わるので、位置がズレる、ということです。

投稿2023/06/29 03:08

編集2023/06/29 03:22

Lhankor_Mhy

総合スコア37401

この回答はGPT-4による自動生成回答です

以下のようにCSSを修正することで、nav内でリストを中央に配置し、横並びにすることが可能です。

CSS
1.logo-area{
2    display: inline-block;
3}
4
5.nav-links{
6    display: inline-block;
7}
8
9.nav-links ul{
10    list-style: none;
11    padding: 0;
12    margin: 0;
13    display: flex;
14    justify-content: center;
15}
16
17.nav-links ul li{
18    margin: 0 10px;
19}
20
21nav{
22    width: 100%;
23    background-color: rgba(226, 43, 156, 0.547);
24    text-align: center;
25}

ここで、display: flex;とjustify-content: center;を使用しています。これはFlexboxというレイアウトモデルを使用しています。Flexboxは、要素のサイズが動的でも、または要素のサイズが予めわかっていなくても、最適なスペース配分を行います。

また、display: inline-block;やfloat: left;を使用した場合にレイアウトが崩れる理由ですが、これはそれぞれのプロパティが持つ特性によるものです。

display: inline-block;は、要素をインライン要素のように（つまり横並びに）配置しますが、要素の周囲に空白（マージン）を自動的に追加します。これがレイアウトを崩す原因となります。
float: left;は、要素を左側に寄せ、その周囲にテキストなどの要素が回り込むようにします。これにより、元のレイアウトから要素が「浮き上がる」ため、レイアウトが崩れることがあります。

以上、ご参考になれば幸いです。

投稿2023/06/28 09:21