おしえて

html／cssの、navを２段にする方法を教えてください

解決済

質問者：ハコ2222
質問日時：2020/07/06 10:08
回答数：4件

webデザイン初心者です。
タイトルの通り、navを２段にしたいのですがうまくいきません。
一行目：お問い合わせ、契約内容確認（右寄せ）
二行目：ホーム　メニュー　などのいわゆる普通のナビゲーション部分（中央配置）

です。
お知恵を貸していただけますと幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： t_fumiaki
回答日時：2020/07/06 11:36

ナビゲーションは結構面倒。

横幅とかマージンとか色々調整して下さい。

以下は例
cssでnav1、nav2のクラスセレクタを作りhtmlで参照する。

<nav class="nav1">
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">契約内容変更</a></li>
</ul>
</nav>

<nav class="nav2">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">アプリ</a></li>
</ul>
</nav>

CSS側-------------------------------------------------
.nav1{
position:relative;
width:1000px;
height:32px;
}

.nav1 li
{
width: 150px;
height:32px;
float: right;
margin-right:0px;
line-height: 32px;
list-style-type: none;
}

.nav2{
position:relative;
width:500px;
height:32px;
margin-left:auto;
margin-right:auto;
}

.nav2 li
{
display:inline;
width: 150px;
height:32px;
float: left;
line-height: 32px;
list-style-type: none;
}

- 1
- 件

通報する

No.4

回答者： gura_
回答日時：2020/07/06 11:53

ハコ2222　さん

　･････navを２段にしたい･･････････････

参考↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
nav{ background:#8e8; text-align:center; }
.nav01{ display:flex;justify-content:flex-end; list-style-type:none; }
.nav02{ display:flex;justify-content:center; list-style-type:none; }
nav li a{ display:inline-block; width:10em; background:#eea; margin:0 1px; }
</style>
</head>
<body>
<nav>
<ul class="nav01">
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">契約内容変更</a></li>
</ul>
<ul class="nav02">
<li><a href="#">トップ</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">アプリ</a></li>
</ul>
</nav>

</body>
</html>

- 1
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2020/07/06 11:10

こんにちは

なさりたいことが、よくわからないけれど、とりあえず

<style type="text/css">
nav li { display:inline-block; }
</style>

を<head>内にいれてみるとか・・・

- 1
- 件

通報する

No.1

回答者：かわごえ
回答日時：2020/07/06 10:17

＞うまくいきません

とは？
どのように書いているのか明示したほうが良いと思います。
https://webst8.com/blog/css-position/
https://www.tagindex.com/stylesheet/box/position …
https://chot.design/html-css-beginner/a8980b3b8e …
一般的であれば<div>にpositionでいけると思います。

- 0
- 件

通報する

この回答へのお礼

早速のご返信ありがとうごいざます。
＞＞うまくいきません
とは？
どのように書いているのか明示したほうが良いと思います。
→まったくやり方がわからず、二行にならないという意味です。

いま、htmlに
<nav>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">契約内容変更</a></li>
</ul>
</nav>

<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">アプリ</a></li>
</ul>
</nav>

と記載しています。
これで二行にならないのはわかっているのですが、どうすればよいのかが全くわかりません。
divでグループ名を分ければよいでしょうか。

＞一般的であれば<div>にpositionでいけると思います。
添付のurlも拝読しましたがまったくわかりませんでした。
どうやってpositionの命令をつけるのかがわかりません。