HTMLにてウェブサイトを作っています。 ご覧のように、左のボーダーを仕切りとして挿入しようとしましたが、色付け部分とくっついてしまって離すことができません。

画像

ベストアンサー

0

あと、 ↑上記のコードだと、 ul 要素のフレックスレイアウトの揃え位置を、 justify-content:center にしているせいで、 ウィンドウ幅が ul よりも小さくなると、 ul が左右均等にはみ出して、 スクロールできない左側にはみ出した部分が見れなくなる。 こういう場合は、 ul の ::before, ::after 擬似要素を、 flex: 1 1 0px で横に自由に伸縮するようにして置き、 justify-content:stretch に切り替えれば、 ::before, ::after がスプリングの役を果たして メニューは中央に揃えらえるし、 ページ幅が狭くなっても左側にはみ出さなくなる。 [ 修正版:jsfiddle ] https://jsfiddle.net/auhgvecL/

ThanksImg質問者からのお礼コメント

沢山の方からのご回答、本当にありがとうございます。 送って頂いたコードはすべて読ませて頂きました。 widthや<a>要素などすでに知っていたコードのほかに justify-content: before-space や justify-content: stretch など新しい方法とも出会うことができました。 元コードの校正まで頂いて、とても感謝しております。 本当にありがとうございました!

お礼日時:1/26 7:56

その他の回答(2件)

0

こんなの如何でしょう? 数字や色は調整して下さい。 ● CSS ul.menu-list {max-width: 700px; display: flex; justify-content: space-between; margin: auto; padding: 0;} .menu-list li {display: inline-block; text-align: center; width: 130px;} .menu-list li a {text-decoration: none; display: block; padding: 3px 0; color: blue; background-color: #eff89f; border-left: black solid 2px;} .menu-list li a:hover {color: skyblue;} ● HTML <nav> <ul class="menu-list"> <li><a href="#">○○について</a></li> <li><a href="#">こんな時は</a></li> <li><a href="#">○○情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav>

0

1150348402さん >・・・・どういったやり方で距離をとることができる・・・・・・・・・・・ そのソースリストが無いので具体的に指摘できませんが、そうなるように書けば出来ます。 ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .gnav { display: flex; height: 2rem; margin: 0 auto; width: 70%; } .gnav li { flex:1; list-style: none; position: relative; padding: 0 18px; border-right: 3px solid #444; } .gnav li:last-child { border-right: 0px solid #444; } .gnav li a { background: #eeb; color: #00c; font-weight:bold; display: block; height: 2rem; line-height: 2rem; text-align: center; text-decoration: none; width: 100%; } </style> </head> <body> <ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a></li> <li><a href="">Menu4</a></li> <li><a href="">Menu5</a></li> </ul> </body> </html>

ご回答ありがとうございます。 position: relativeやdisplay: blockなど試してみましたが、うまくいきませんでしたのでコードを提示させて頂きます。 どうも知恵袋にソースコードを載せるのにはいつも文字数で苦労しますので、いくつかの返信に分けて提示させて頂きます。