![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
No.3ベストアンサー
- 回答日時:
ナビゲーションは結構面倒。
横幅とかマージンとか色々調整して下さい。
以下は例
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;
}
No.4
- 回答日時:
ハコ2222 さん
・・・・・navを2段にしたい・・・・・・・・・・・・・・
参考↓
<!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>
No.2
- 回答日時:
こんにちは
なさりたいことが、よくわからないけれど、とりあえず
<style type="text/css">
nav li { display:inline-block; }
</style>
を<head>内にいれてみるとか・・・
No.1
- 回答日時:
>うまくいきません
とは?
どのように書いているのか明示したほうが良いと思います。
https://webst8.com/blog/css-position/
https://www.tagindex.com/stylesheet/box/position …
https://chot.design/html-css-beginner/a8980b3b8e …
一般的であれば<div>にpositionでいけると思います。
早速のご返信ありがとうごいざます。
>>うまくいきません
とは?
どのように書いているのか明示したほうが良いと思います。
→まったくやり方がわからず、二行にならないという意味です。
いま、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の命令をつけるのかがわかりません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul>~</ul>が二つ続くと間に改...
-
htmlについて質問です! 写真の...
-
添付画像のようなツリーリスト...
-
html <ul></ul>の並びで一行空...
-
レスポンシブWebデザインでリン...
-
番号付きリスト(<Ol><Li>・・...
-
css ol liにdisplay:inlineを設...
-
リストの数字のフォントサイズ...
-
画像にリンクを張ると画像がず...
-
<ul><li></li></ul>にするメリ...
-
フレーム内のtarget指定を全て...
-
ulとliで囲った文字の一部を変...
-
HTMLで画像を3つ並べる方法
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
画像上にリンクとインラインフ...
-
html/cssの、navを2段にする...
-
<li>で並べたメニューのリンク...
-
CSS 横並びリストの書き方はど...
-
リストを2つに分割して、それぞ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
HTML ul li で横並びにナビゲー...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
HTML5のfooterに見出しを付けて...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
ボタンを横に並べて表示させる方法
-
html <ul></ul>の並びで一行空...
-
画像にリンクを張ると画像がず...
-
アコーディオンメニューがかく...
-
ulとliで囲った文字の一部を変...
-
レスポンシブWebデザインでリン...
-
htmlの<ol>タグで、数字などを...
おすすめ情報