时间戳

首页 > 解决方案 > 社交与导航栏融合

html - 社交与导航栏融合

问题描述

我想要导航栏上方右侧的社交媒体图标，但是当我将它们浮动在右侧时，它与导航栏融为一体，有人可以帮忙吗？

我已经尝试了固定和绝对的位置，但它不起作用。

<!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>

所以，我想要右上角的社交媒体图标（是的，我要让它们变小

标签： htmlcss

解决方案

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

在您的代码中找到上面的行并将其替换为下面给定的代码行。

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

推荐阅读