定位圖標html和css的問題

Question

我希望我的 facebook 圖標位於導航欄鏈接上方的右上角，正如您所看到的那樣，它位於左側.. 我嘗試將它放在導航欄元素內部和外部......我嘗試了所有不同的定位代碼，只是什么都行不通。 任何幫助都會很棒.. 我已將我的整個代碼包含在 codepen 中.. 我希望那是正確的。

https://codepen.io/hollyj24/pen/XWdRZWd

<nav class="navbar navbar-expand-lg">
      <a href="#"><img class="navbar-brand" src="images\logo.png"></a>
      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="#navbarNav">
        <a href="https://www.facebook.com/pawsforwalk" target="_blank"><i class="fab fa-facebook-square fa-2x"></i></a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#pricing">Pricing <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonials">Testimonials</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

Answer 1

您沒有將任何 CSS 應用於 FB 鏈接，因此它處於默認位置。

如果你給a元素一個類或 id：

<a id="fbiconlink" href="https://www.facebook.com/pawsforwalk" target="_blank">
    <i class="fab fa-facebook-square fa-2x"></i>
</a>

現在我們可以在我們的 CSS 中將它定位到我們想要的任何地方：

#fbiconlink {
  position: absolute;
  right: 1.5rem;    
  top:20px; 
}

如果您希望它位於特定位置，我們可以使用絕對位置。 這將它放置在右側 1.5rem - 這是最后一個鏈接的右側填充 (.5rem) + 導航欄的右側填充 (1rem)，以便它與最后一個鏈接保持一致。

查看一個工作示例（單擊整頁以使用非折疊菜單查看它）

 body { font-family: monospace; font-family: "Quicksand", sans-serif; } h1, h2, h3, h4, h5, h6 { color: #fff; font-family: "Podkova"; font-weight: 800; } em { color: #fff; } #title { background-color: #71a6c9; } .carousel-caption { position: relative; left: 0; top: 0; font-size: 1.5rem; } /* headings */ .big-heading { color: #fff; text-align: left; padding: 0 20px; } .title-p { color: #fff; text-align: left; font-family: "Quicksand"; padding: 0 20px; padding-top: 50px; } .blue-headings { color: #71a6c9; text-align: center; padding: 20px; padding-top: 50px; font-size: 3rem; } .white-headings { color: #fff; text-align: center; font-size: 3rem; padding-top: 50px; padding-bottom: 20px; } .fa-facebook-square { color: #fff; } /* Navbar */ .navbar { background-color: #3282b8; padding: 10px 20px 10px 35px; } .navbar-brand { height: 150px; } .nav-link { font-family: "quicksand"; color: #fff; font-size: 1rem; padding-top: 100px; } .main-head { padding: 100px 30px 25px 30px; } /* Pricing Section */ .pricing-column { text-align: center; padding: 30px 15px 100px 15px; } .card { border-color: #71a6c9; } .card-header { background-color: #71a6c9; } .let-out { padding: 40px 20px 20px 40px; } .let-out-btn { margin-top: 35px; color: #71a6c9; } .btn { border-color: #71a6c9; color: #71a6c9; font-family: "podkova"; font-size: 1.75rem; } .btn:hover { background-color: #71a6c9; border-color: #71a6c9; } /* Testimonial Section */ #testimonials, .testimonial-container { background-color: #71a6c9; } .testimonial-container { padding-left: 200px; padding-right: 200px; } #testimonial-carousel { height: 300px; width: 100%; } .testimonial-text { color: #fff; text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 1.5; } .testimonial-name { color: #fff; font-size: 1rem; text-align: center; } .carousel-control-prev { margin-left: -100px; } .carousel-control-next { margin-right: -100px; } .form-group-test { padding-bottom: 13px; } /* About Section */ .about-img { border-radius: 15px 50px; width: auto; height: 200px; } .about-box { text-align: center; color: #71a6c9; font-size: 1.25rem; font-weight: 600; } .about-text { padding: 20px 75px; } .about-heading { color: #71a6c9; text-align: center; padding: 50px 20px; font-size: 3rem; } /* Contact Section */ #contact { background-color: #71a6c9; } .contact-headings { font-size: 2rem; text-align: center; } .form-box { padding: 50px; color: #fff; font-family: "podkova"; } .contact-btn { border-color: #fff; color: #fff; font-family: "podkova"; font-size: 1.75rem; } .contact-btn:hover { background-color: #fff; border-color: #fff; color: #71a6c9; } .icons { color: #fff; text-align: center; } /* Footer Section */ #footer { padding: 20px; background-color: #3282b8; text-align: center; } .footer-icons { color: #fff; padding: 10px; } .footer-text { color: #fff; text-align: center; } #fbiconlink { position: absolute; right: 1.5rem; top:20px; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel='icon' href='images\\favicon (1).ico' type='image/x-icon' /> <title>Paws for Walk</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Podkova:wght@400;500;600;700;800&family=Quicksand&display=swap" rel="stylesheet"> <!-- CSS Stylesheets --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/d584b0247e.js" crossorigin="anonymous"></script> <!-- Bootstrap Scripts --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <section id="title"> <!-- Navbar --> <nav class="navbar navbar-expand-lg"> <a href="#"><img class="navbar-brand" src="images\\logo.png"></a> <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="#navbarNav"> <a id="fbiconlink" href="https://www.facebook.com/pawsforwalk" target="_blank"><i class="fab fa-facebook-square fa-2x"></i></a> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#pricing">Pricing <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#testimonials">Testimonials</a> </li> <li class="nav-item"> <a class="nav-link" href="#About">About</a> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <!-- Title --> <div class="main-head container-fluid"> <div class="row"> <div class="col-lg-6"> <h1 class="big-heading">Professional dog walking service - <em class="tagline">We go the extra mile.</em></h1> <h4 class="title-p">Based in and around Market Rasen with competitive pricing.</h4> </div> <!-- Img-slideshow --> <div class="col-lg-6"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images\\logo.png" class="d-block w-100" alt="logo"> <div class="carousel-caption"> <p>My Logo</p> </div> </div> <div class="carousel-item"> <img src="images\\chris&huck.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Me & Hucks</p> </div> </div> <div class="carousel-item"> <img src="images\\lewi.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Lewi</p> </div> </div> <div class="carousel-item"> <img src="images\\poppy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Poppy</p> </div> </div> <div class="carousel-item"> <img src="images\\poppy&freddy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Poppy & Freddy</p> </div> </div> <div class="carousel-item"> <img src="images\\teddy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Teddy</p> </div> </div> <div class="carousel-item"> <img src="images\\bella.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Bella</p> </div> </div> </div> </a> </div> </div> </div> </section> <!-- Pricing --> <section id="pricing"> <h2 class="blue-headings">Pricing</h2> <div class="container"> <div class="row"> <div class="pricing-column col-lg-4 col-md-6"> <div class="card"> <div class="card-header"> <h3>Individual Walks</h3> </div> <div class="card-body"> <p>30 Minute walk - £11</p> <p>45 Minute walk - £13</p> <p>Each additional dog - £2</p> <a type="button" href="#contact" class="btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> <div class="pricing-column col-lg-4 col-md-6"> <div class="card"> <div class="card-header"> <h3>Group Walks</h3> </div> <div class="card-body"> <p>30 Minute walk - £8</p> <p>45 Minute walk - £10</p> <p>Each additional dog - £2</p> <a type="button" href="#contact" class="btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> <div class="pricing-column col-lg-4"> <div class="card"> <div class="card-header"> <h3>Let Out</h3> </div> <div class="let-out card-body"> <p>Let out in the garden</p> <p>15 Minutes - £7</p> <a type="button" href="#contact" class="let-out-btn btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> </div> </section> <!-- Testimonial Carousel --> <section id="testimonials"> <div class="testimonial-container container-fluid"> <h2 class="white-headings">Testimonials</h2> <div id="testimonial-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <p class="testimonial-text">"Chris came highly recommended to me by my previous when she retired, he has definitely lived up to his reputation? He is enthusiastic, trustworthy, reasonable, accommodating and a delight to know. He has been such a good influence in my pooches life (known to Chris as 'the crazy one') Winnie has loved everything about being walked by Chris and his other four legged friends. I can't recommend Chris enough if you need a dog walker, he is without doubt simply amazing! Don't ever give up Chris as too many people/pooches would be lost without you. Thank you so so much for your outstanding care for Winnie, it is very much appreciated!!"</p> <p class="tesimonial-name"><em>-Ruth Sadler</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been looking after our family pet since April 2014. He is trustworthy, hard worker, flexible, punctual, friendly and his prices are extremely competitive. From September, I shall increase his hours without a doubt. I would have absolutely no hesitation in recommending Chris. As highlighted on his business card, he is entirely 'dedicated to value and reward his customers'."</p> <p><em>-Aurelie</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Would just like to say how impressed we all are with Chris . Has walked our dog Billy for the last 15 days whilst he was staying at my parents in Osgodby while we were away on holiday . By all accounts Billy loved him and his walks .would recommend his services to anybody , he does exactly what he says he will and we are sure Billy will miss him now he is back home . Cannot thank him enough , and hopefully we will be using his service in the future."</p> <p><em>-Wendy & Phil Hammond</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"I can't recommend Chris highly enough! He's been walking my two dogs for the last year and they absolutely adore him. He can't do enough to help you and is incredibly flexible. I couldn't manage without him." </p> <p><em>-Libby Reynolds</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been looking after Freddie & Poppy since last autumn. he is reliable, flexible, honest and the dogs adore him. I would recommend him to anybody. He really has gone the extra mile on occasions. I am moving away from the area and he will be such a hard act to follow. Thanks for all your work Chris - we will all miss you!"</p> <p><em>-Val Cochrane</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been walking my dog Padmai for several months now and I have found him to be reliable and flexible. I am not sure who enjoys the walks most Padmai or Chris! and it gives me peace of mind knowing my dog has company and good a walk when I am at work. Thanks Chris and keep up the excellent job you are doing."</p> <p><em>-Susan McStay</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"After only a month of Chris walking my dogs, I can't believe I managed without him! So professional & reliable - thank you Chris! The furboys are looking forward to all their walks in 2016."</p> <p><em>-Lisa Jamieson</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been walking Charlie for nearly a year and the pair of them have become firm friends. Chris has a very special way with dogs and really gets to know their characters and little ways. Charlie always comes home well exercised, happy and clean - even on the muddiest of days."</p> <p><em>-Griselda Boyden</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"We use Chris to walk out dog Flea, he is reliable and flexible. Flea seems happier and more content when we get home from work and we no longer have to worry about him when we are at work, I would highly recommend Chris"</p> <p><em>-Ayesha Davies</em></p> </p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris is not just a dog walker he puts 100% into his relationship with my dog bella who loves him to bits. I would recommend Chris to anyone looking for someone to walk their dog, thank you Chris"</p> <p><em>-Judy & Bella</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"We moved to the area with our 1 year old German Shepherd pup. Chris has been fantastic and helped Talisker settle in the new environment. Chris shows great flexibility and knows how to handle our very boisterous boy."</p> <p><em>-Kasia B</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"So pleased we found Chris to walk our Labrador, Maddie, while I was recovering from an operation. He is fantastic with dogs, and loves their company as much as they do his. He is very reliable and really does 'go the extra mile'! Maddie has had a fabulous time and met lots of new doggy friends. She absolutely adores Chris and he's going to be a hard act for me to follow! Thank you so much Chris and we wish you continued success with your business. I'm certain we'll be back whenever we need your help in the future."</p> <p><em>-Carol & Bernard Warr - and Maddie & Charlie, of course.</em></p> </div> </div> <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </section> <section id="About"> <h2 class="about-heading">About Me</h2> <div class="container-fluid"> <div class="row"> <div class="about-box col-lg-6"> <img class="about-img" src="images\\chris.jpg" alt="Owner"> <p class="about-text">My name is Chris and I adore dogs. Having owned dogs throughout my life they bring me so much joy and I can honestly say that this is my dream job, not only do I get to work with dogs everyday but I also get to watch them enjoy there walks they love so much.</p> </div> <div class="about-box col-lg-6"> <img class="about-img" src="images\\poppy&freddy.jpg" alt="dog-img"> <p class="about-text">I've always wanted to work with animals especially dogs and throughout my life my main attributes have been that I'm a trustworthy, hardworking, reliable, and friendly individual. I soon began to realize that all of these attributes fitted perfectly into the dog walking profession.</p> </div> <div class="about-box"> <img class="about-img" src="images\\charlie.jpg" alt="dog-img"> <p class="about-text">From years of experience with dogs I understand how important it is for them to be exercised on a regular basis, I know this isn't always easy with work and life commitments and it can be hard to find the right person to care for your dogs. That is when I decided to put both of my passions together, looking after mans best friend and helping others. This way not only do I get the opportunity to work with dogs everyday but also help give those in need a professional reliable service with someone they can trust. </p> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\Chris&billy.jpg" alt="chris&billy"> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\gerrard.jpg" alt="dog-img"> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\teddy2.jpg" alt="dog-img"> </div> <div class="about-box"> <p class="about-text">I made my company Paws for Walk in 2014 and haven't looked back since. I am continually focusing on providing the highest levels of customer satisfaction and will do everything I can to meet your expectations, We go the extra mile! At Paws for Walk its vital to go that extra mile for all of my clients and I do so by doing my upmost to meet your every need. I also offer my customers rewards by giving out special offers to my long term members. </p> </div> </div> </div> </section> <section id=contact> <div class="container"> <div class="row"> <div class="form-box col-lg-6"> <h2 class="contact-headings">Contact Me</h2> <form action="mailto:chris@pawsforwalk.co.uk"> <div class="form-group"> <label for="email-address"></label> <input type="email" class="form-control" id="email-address" placeholder="name@example.com"> <label for="subject"></label> <input type="text" class="form-control" id="subject" placeholder="Subject"> <div class="form-group"> <label for="message"></label> <textarea class="form-control" id="message" rows="8" placeholder="Your-Message"></textarea> </div> </div> </form> <button type="submit" class="contact-btn btn">Submit</button> </div> <div class="form-box col-lg-6"> <h2 class="contact-headings">Submit A testimonial</h2> <form action="mailto:chris@pawsforwalk.co.uk"> <div class="form-group"> <label for="subject"></label> <input type="text" class="form-control" id="subject" placeholder="Name"> <div class="form-group-test"> <label for="message"></label> <textarea class="form-control" id="message" rows="10" placeholder="Your-Testimonial"></textarea> </div> </div> </form> <button type="submit" value="send" class="contact-btn btn">Submit</button> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="icons col-lg-3"> <i class="fas fa-paw fa-2x"></i> <p>Paws for Walk</p> </div> <div class="icons col-lg-3"> <i class="fas fa-phone fa-2x"></i> <p>07714847184</p> </div> <div class="icons col-lg-3"> <i class="fas fa-envelope fa-2x"></i> <p>chris@pawsforwalk.co.uk</p> </div> <div class="icons col-lg-3"> <i class="fas fa-map-marker-alt fa-2x"></i> <p>Market Rasen</p> </div> </div> </div> </section> </body> <footer id=footer> <i class="footer-icons fas fa-envelope fa-2x"></i> <i class="footer-icons fab fa-facebook-square fa-2x"></i> <p class="footer-text">Paws for Walk - Established 2004</p> </footer> </html>

（您的 codepen 示例中的漢堡包圖標不起作用，所以我不確定 FB 圖標應該在較小的屏幕上的位置 - 但是上面的解釋和示例中應該有足夠的內容來幫助您在需要時進行調整！）

Answer 2

試試這個：

@media (min-width: 992px){

.navbar-expand-lg .navbar-collapse {
    flex-direction: column;
    align-items: flex-end;
  }

}

Answer 3

將 id 添加到 facebook 鏈接（標簽）

#fb{
  position: absolute;
  top: .5rem; //because you given .navbar padding: .5rem 1rem; take top padding
  right: 1rem; //because you given .navbar padding: .5rem 1rem; take right padding
}

Codepen 演示： https ://codepen.io/Rayeesac/pen/YzqVepa