Question

我面临的问题是两个堆叠在一起的导航条的对齐方式，以下是我的代码。我想将上部导航条与下部导航条对齐。我正在添加原始图像和代码结果。我已经尝试了多种方式，例如将两个导航栏嵌套在一个中，但是对齐几乎没有问题。按钮或其他是否有任何问题。请帮助

<nav class="navbar navbar-expand-md">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/facebook.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/instagram.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/linkdin.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item ">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/twitter.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>


                <li class="nav-item">
                    <a class="btn btn-primary" style="background-color: #685dadfa;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href="#">
                        <img src="F:/Theme Development/New folder/lock1.png" style="vertical-align:sub" /> REGISTER</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-primary" style="margin-left:1rem;background-color: #179c95;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href="#">
                        <img src="F:/Theme Development/New folder/sign_in.png" style="vertical-align:sub;" /> LOG IN</a>
                </li>
            </ul>
        </div>
    </nav>

    <nav class="navbar navbar-expand-md navbar-light" style="background-color:white">

        <a class="navbar-brand mb-0 h1" style="font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" href="#">Website Logo</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Post a Job</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Post Resume</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
        </div>
        <!--/div-->
    </nav>

Answer 1

<a>元素周围有填充，这是下面的屏幕截图中的绿色部分：

如果要使“联系我们”的右侧和“登录”按钮对齐，请将padding-right: 0;添加到<a>的“联系我们”

            <li class="nav-item">
                <a class="nav-link" href="#" style="padding-right:0;">Contact Us</a>
            </li>

对齐两个Bootstrap 4导航栏

1 个答案: