Q&A
HTML CSSを使ってAirbnbのサイトを模写練習中です。
ヘッダーの部分です。
.active のリンクに
border-bottomをつけたいです。
見本のサイトだと、ヘッダーの境目ギリギリの位置にborderがついています。
普通に指定するだけだと、要素のすぐ下についてしまうので、
padding-bottomをつけるなどして下の方へと離してみよう、と思ったのですが、
この様に、テキストが上の方へと移動してしまいます。
文字はそのままに、boder-bottomのみを離していくには
どうしたら良いでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="stylesheet" href="css/media.css"> 9 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 13 14 <title>Hello, world!</title> 15 </head> 16 <body> 17 18<header> 19 <nav class="navbar navbar-expand-sm"> 20 21 <a href="#" class="navbar-brand"><i class="fab fa-airbnb fa-2x"></i></a> 22 23 <div class="content-wrapper"> 24 <ul class="navbar-nav"> 25 <li class="nav-item active"><a href="#" class="nav-link">概要</a></li> 26 <li class="nav-item"><a href="#" class="nav-link">準備</a></li> 27 <li class="nav-item"><a href="#" class="nav-link">安全</a></li> 28 <li class="nav-item"><a href="#" class="nav-link">マネープラン</a></li> 29 </ul> 30 31 <a href="#" class="btn mr-5">はじめる</a> 32 </div> 33 34</nav> 35</header> 36 37<section class="main-visual"> 38 <div class="main-visual-wrapper"> 39 40 </div> 41</section>
CSS
1 2/* ナビバー */ 3.navbar { 4 background-color: #ffffff; 5 height:90px; 6} 7.navbar .navbar-brand { 8 color: #484848; 9} 10 11nav .btn{ 12 background:#FF5A5F; 13 color: white; 14 font-weight: bold; 15} 16 17.content-wrapper{ 18 display: flex; 19 width: 100%; 20 justify-content: space-between; 21} 22 23.content-wrapper .navbar-nav .nav-item.active .nav-link{ 24 border-bottom:solid 2px #008489; 25 padding-bottom: 50px; 26} 27 28/* ナビバー自動 */ 29 30 31.navbar .navbar-nav .nav-link { 32 color: #484848; 33 margin: 0 0.25em; 34} 35 36.navbar .navbar-nav .nav-link:hover{ 37 text-decoration: underline; 38} 39 40.navbar .navbar-nav .nav-item.active .nav-link, 41.navbar .navbar-nav .nav-item.active .nav-link:hover, 42.navbar .navbar-nav .nav-item.active .nav-link:focus, 43.navbar .navbar-nav .nav-item.show .nav-link, 44.navbar .navbar-nav .nav-item.show .nav-link:hover, 45.navbar .navbar-nav .nav-item.show .nav-link:focus { 46 color: #008489; 47 background-color: #ffffff; 48} 49 50.navbar .navbar-link { 51 color: #484848; 52} 53.navbar .navbar-link:hover { 54 color: #008489; 55} 56
回答1件
0
ベストアンサー
こういうことでしょうか？
css
1.content-wrapper .navbar-nav .nav-item.active .nav-link { 2 border-bottom: solid 2px #008489; 3 padding-bottom: 50px; 4 margin-bottom: -50px; 5}
ただ、次の要素にかぶってしまうと思いますが……？
投稿2020/05/18 03:33
総合スコア36142
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/20 00:52