Q&A
https://gyazo.com/326020646e29cd4b7e928283fec9e30d
↑こういうことでしょうか？
等間隔で仕切り線をいれたいのですが、文字のすぐ横に表示されてしまいます。
両サイドに仕切り線を入れたいです。ご助言お願い致します。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link rel="shortcut icon" href="/favicon.ico"> 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10 <title>****************************</title> 11 </head> 12 <body> 13 <header> 14 <div class="top"></div> 15 <div class="wapper"> 16 <ul class="logo"> 17 <li><img class="mainlogo" src="imges/ks_logo1.png" alt=""></li> 18 <li><img class="mainlogo2" src="imges/ks_logol2.png" alt=""></li> 19 </ul> 20 </div> 21 </header> 22 <main> 23 <div class="topnav"> 24 <nav> 25 <ul> 26 <li><a href="./">HOME</a></li> 27 <li><a href="kaisyaannai.html">会社案内</a></li> 28 <li><a href="seihinsyoukai.html">製品紹介</a></li> 29 <li><a href="otoiawase.html">お問い合わせ</a></li> 30 </ul> 31 </nav> 32 </div> 33
CSS
1.topnav{ 2 margin: 0 auto; 3 background-color: #32cd32; 4} 5.topnav ul{ 6 display: flex; 7 list-style-type: none; 8 margin: 0 auto; 9 width: 960px; 10 max-width: 100%; 11 font-size: 30px; 12 padding-top:25px; 13 padding-bottom: 25px; 14 padding-left: 50px; 15 font-weight: bold; /*太字に*/ 16 color: #ffffff; 17} 18.topnav li { 19 width:40%; 20} 21.topnav ul li a{ 22 text-decoration: none; 23 color: #ffffff; 24}
回答2件
0
ベストアンサー
paddingがulに設定されているので文字くらいのサイズのラインにしかならず、文字と近い位置に表示されてしまうのだと思います。
文字の所だけリンクになると押しづらく感じる場合があるのでaにpaddingを設定し、display:blockを入れることで線から線の間はすべてリンクが効くようにしてあります。
ご参考まで。
html
1<div class="topnav"> 2 <nav> 3 <ul> 4 <li><a href="./">HOME</a></li> 5 <li><a href="kaisyaannai.html">会社案内</a></li> 6 <li><a href="seihinsyoukai.html">製品紹介</a></li> 7 <li><a href="otoiawase.html">お問い合わせ</a></li> 8 </ul> 9 </nav> 10</div>
css
1.topnav { 2 margin: 0 auto; 3 background-color: #32cd32; 4} 5.topnav ul { 6 display: flex; 7 list-style-type: none; 8 margin: 0 auto; 9 width: 960px; 10 max-width: 100%; 11 font-size: 30px; 12 /* 一応消しておきます 13 padding-top: 25px; 14 padding-bottom: 25px; 15 padding-left: 50px; 16 */ 17 font-weight: bold; /*太字に*/ 18 color: #ffffff; 19} 20.topnav li { 21 width: 25%; /* 4つなら25%で良いかと */ 22 border-left:#fff solid 1px; /* 追加 左側に線を引く */ 23 text-align:center; /* 追加 各リストの中央にしたい場合 */ 24} 25.topnav li:last-child { /* 追加 最後のliだけ右側に線を引く */ 26 border-right:#fff solid 1px; 27} 28.topnav ul li a { 29 text-decoration: none; 30 color: #ffffff; 31 display:block; /* 追加 */ 32 padding:10px; /* 追加 */ 33} 34
投稿2021/02/18 23:57
総合スコア3235
0
もともとはどこに仕切り線を入れていたかわかりませんが、
グローバルナビのリストを等幅で横並びにし、それにborderをつけたらよいのではないでしょうか。
css
1 2.topnav ul{ 3 display: flex; 4 5/* ↓一応いれます */ 6 justify-content: space-between; 7 8 list-style-type: none; 9 margin: 0 auto; 10 11/* レスポンシブなら、max-widthとwidthの表記は逆が良いかと */ 12 max-width:960px; 13 width:100% 14 15font-size: 30px; 16 17/* どういうデザインかわかりませんが、padding-left必要ですか？ */ 18 padding-top:25px; 19 padding-bottom: 25px; 20 padding-left: 50px; 21 22 font-weight: bold; /*太字に*/ 23 color: #ffffff; 24} 25 26.topnav li { 27/*↓すでに入っていれば不要です。 */ 28-webkit-box-sizing: border-box; 29box-sizing: border-box; 30 31/* ↓リストが4つだから25％で */ 32 width:25%; 33 34/* ボーダー（左）入れます */ 35border-left:1px solid #fff; 36} 37 38/* リストの最後だけ右にもボーダー*/ 39.topnav li:last-child { 40border-right:1px solid #fff; 41} 42
こんな感じでどうでしょうか
投稿2021/02/18 14:17
総合スコア17
あなたの回答
tips
プレビュー
