Question

我希望社交媒体图标位于导航栏的右侧，但是当我将其浮动到右侧时，它与导航栏融合了，有人可以帮忙吗？

我已经尝试过固定位置和绝对位置，但这不起作用。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/index.css">
        <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">
        <title>Branco</title>
    </head>
    <body>
        <header>
            <div class="container-fluid">
                <div  style="align-content:right" class="social-icons float-right">
                    <a href="https://www.instagram.com/brancoschoenaker/" target="_blank"> 
                        <img src="assets/instagram-icon.png">
                    </a>
                    <a href="https://twitter.com/SchoenSchaap" target="_blank">
                        <img src="assets/twitter-icon.png">
                    </a>
                    <a href="https://www.reddit.com/user/LilPutje" target="_blank">
                        <img src="assets/reddit-icon.png">
                    </a>
                    <a href="https://www.youtube.com/channel/UCw2amewef_lsD1sU8X5mhjw?view_as=subscriber" target="_blank">
                        <img src="assets/youtube-icon.png">
                    </a>




                </div>

            </div>
            <nav class="navbar navbar-light bg-light" >
                <div class="container-fluid"> 
                    <a class="navbar-brand" href="index.html">
                        <h1>Branco</h1>
                    </a>
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a class="nav-link active nav-text" href="index.html">Home</a> 
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active nav-text" href="about.html">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active nav-text" href="mailto:brancoschoenaker@gmail.com">Contact</a>                        
                        </li>
                    </ul>
                </div>
            </nav>
        <header>

    </body>
    </html>

因此，我希望社交媒体图标位于右上角（是的，我将使它们变小

Answer 1

<div  style="align-content:right" class="social-icons float-right">

在代码中找到上面的行，并用下面给定的代码行替换。

  <div  style="text-align: right" class="social-icons">

社交与导航栏融合

1 个答案: