Q&A
letさんが書いたコードをご提示ください。
上記がイメージです。グローバルナビゲーションで中央に配置するようにして両サイドはブラウザの端まで続くようにしたいです。
ご助言お願いします
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="css/style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link href="css/topindex.css" rel="stylesheet" type="text/css" madia="screen"> 9<link rel="shortcut icon" href="/favicon.ico"> 10<meta name="viewport" content="width=device-width,initial-scale=1.0"> 11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"> 12<title>*******************************************</title> 13</head> 14<body> 15 <div class="wrapper01"> 16 <header> 17 <!-- header--> 18 <div class="headline"> 19 <a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a> 20 <p class="syamei">********************</p> 21 </div> 22 </head> 23<body> 24 <div class="wrapper01"> 25 <header> 26 <!-- header--> 27 <div class="headline"> 28 <a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a> 29 <p class="syamei">***********</p> 30 </div> 31 <nav class="main-nav"> 32 <ul class="nav-list"> 33 <li class="top-nav"><a href="./">*********</a></li> 34 <li class="top-nav"><a href="#">********</a> 35 <ul> 36 <li><a href="#">******</a></li> 37 <li><a href="#">*****</a></li> 38 <li><a href="#"></a></li> 39 </ul> 40 </li> 41 <li class="top-nav"><a href="******************************">お問い合わせ</a></li> 42 <li class="top-nav"><a href="*****************/./">よくある質問</a></li> 43 <li class="top-nav"><a href="***************/./">採用</a></li> 44 </ul> 45 </nav> 46 </header> 47 <!-- /header --> 48<main> 49 50<div class="topimages"> 51<img src="images/top.jpg" alt="top画"> 52<p>****************************************</p> 53</div> 54</main> 55</div> 56</body> 57</html>
CSS
1.nav-list{ 2 padding: 35px 0 5px 0 25px; 3 margin-top: 3px; 4 margin-bottom: 15px; 5 font-size:16px; 6 display : flex; 7 display : -webkit-box; /* old Android */ 8 display : -webkit-flex; /* Safari etc. */ 9 display : -ms-flexbox; /* IE10 */ 10 display: -o-box; /* Opera */ 11 display: box; /* ベンダープレフィックスなし */ 12 justify-content:center; 13 list-style-type:none; 14 align-items:center; 15 margin: 0 auto; 16 width: 1040px; 17 max-width: 100%; 18} 19 20.nav-list li a { 21 text-decoration: none; 22 color: #FFFFFF; 23 background-color: #0000FF; 24 display: block; 25 padding: 5px; 26} 27.nav-list li:hover a { 28 background-color: #000080; 29} 30.nav-list li:hover ul { 31 display: block; 32} 33.nav-list li ul { 34 margin: 0px; 35 padding: 0px; 36 list-style-type: none; 37 display: none; 38 width:20%; 39 position: absolute; 40 z-index:100; 41} 42.nav-list li:hover ul{display: block;} 43.nav-list li ul a { 44 display: block; 45 text-decoration: none; 46 color: #FFFFFF; 47 background-color: #0000FF; 48} 49.nav-list li ul li:hover a { 50 background-color: #008080; 51} 52.nav-list:after { 53 content: ""; 54 clear: both; 55 display: block; 56} 57.top-nav{ 58 width:20%; 59 font-size:20px; 60 text-align: center; 61 border-right: 2px solid; 62 border-color:#ffffff; 63} 64.top-nav a{ 65 display: inline-block; 66 text-decoration: solid; 67 height: 25px;
.nav-listにwidth100％にするとメニュー項目が両端まで広がってしまいます。
イメージの様に中央にできないのです。
CSS
1@charset "utf-8"; 2 3body{ 4 margin-right:auto; 5 margin-left:auto; 6 height: 100%; 7} 8.wf-notosansjapanese { font-family:"-apple-system","BlinkMacSystemFont","Noto Sans JP","Meiryo","游ゴシック","ヒラギノ角ゴ ProN",sans-serif;} 9 10.headline { 11 display: flex; 12 width: 100%; 13 margin-top: 30px; 14 margin-bottom: 0; 15 margin-left: 10px; 16 justify-content: space-between; 17 align-items: baseline; 18 list-style-type:none; 19} 20.headline p{ 21 font-size:30px; 22 margin-top:0; 23 font-weight: bold; 24 text-align: right; 25 margin-bottom: 0; 26 vertical-align: middle; 27} 28.nav-list{ 29 padding: 35px 0 5px 0 25px; 30 margin-top: 3px; 31 margin-bottom: 15px; 32 font-size:16px; 33 display : flex; 34 display : -webkit-box; /* old Android */ 35 display : -webkit-flex; /* Safari etc. */ 36 display : -ms-flexbox; /* IE10 */ 37 display: -o-box; /* Opera */ 38 display: box; /* ベンダープレフィックスなし */ 39 justify-content:center; 40 list-style-type:none; 41 align-items:center; 42 max-width: 100%; 43 width: 1040px; 44 margin: 0 auto; 45 } 46.nav-list li a { 47 text-decoration: none; 48 color: #FFFFFF; 49 background-color: #0000FF; 50 display: block; 51 padding: 5px; 52} 53.nav-list li:hover a { 54 background-color: #000080; 55} 56.nav-list li:hover ul { 57 display: block; 58} 59.nav-list li ul { 60 margin: 0px; 61 padding: 0px; 62 list-style-type: none; 63 display: none; 64 width:20%; 65 position: absolute; 66 z-index:100; 67} 68.nav-list li:hover ul{display: block;} 69.nav-list li ul a { 70 display: block; 71 text-decoration: none; 72 color: #FFFFFF; 73 background-color: #0000FF; 74} 75.nav-list li ul li:hover a { 76 background-color: #008080; 77} 78.nav-list:after { 79 content: ""; 80 clear: both; 81 display: block; 82} 83.top-nav{ 84 width:20%; 85 font-size:20px; 86 text-align: center; 87 border-right: 2px solid; 88 border-color:#ffffff; 89 background: #0000FF; 90} 91.top-nav a{ 92 display: inline-block; 93 text-decoration: solid; 94 height: 25px; 95}
他の方が言われるように
コードをご提示ください^^
回答1件
0
ベストアンサー
こんにちは。
body直下でwidth:100%とすれば、だいたいオッケーです。
html
1<nav> 2 <ul> 3 <li>menu</li> 4 <li>menu</li> 5 <li>menu</li> 6 <li>menu</li> 7 </ul> 8</nav>
css
1nav{ 2 width: 100%; 3 position: fixed; /* 固定配置にしてもしなくても大丈夫 */ 4} 5ul{ 6 width: max-content; 7 margin: 0 auto; 8 display: flex; 9}
質問の変更を受けて追記
css
1.main-nav { 2 background: #0000FF; 3}
投稿2021/03/16 00:55
編集2021/03/16 06:13
総合スコア36928
ご回答ありがとうございます。
ご回答にあった内容を適用したところ縮小されてしまいました。
どごがわるいんでしょうか？
.main-nav {
background: #0000FF;
}
だけでいいですよ。
追記の前は、コードが提示されていなかったので、想像で回答しています。
ありがとうございます
background: #0000FF;追加しましたが、両端まで広がりません。
どうしたらいいんでしょう
当方の環境では上手くいっていますので、ご提示いただいていない部分に原因があると思われます。
CSS追記致しました。ご助言頂けると幸いです。
当方の環境では上手くいっています。
私の方でも確認できました、ありがとうございます。
一番初めのナビの左側にボーダーをいれるのはどうしたらいいんでしょうか？
.top-nav にボーダーをつければいいかと思います。
もしかしたら、.nav-list でもいいかもしれません。
あなたの回答
tips
プレビュー
