为什么我的页脚导航菜单与它们右侧的法律文本重叠，我该如何防止这种情况发生？答案

【问题标题】：Why are my footer nav menus overlapping the legal text to the right of them and how do I prevent that?为什么我的页脚导航菜单与它们右侧的法律文本重叠，我该如何防止这种情况发生？
【发布时间】：2021-03-05 00:32:54
【问题描述】：

我不确定为什么当页面变小时我的菜单 div 与合法 ipsum 重叠？我用不同颜色的边框包裹它们只是为了说明。包括 HTML 和 CSS。

现在我将它设置为 flexbox、space-between 并且合法的 div 具有固定的像素宽度。我认为这足以让 flex 孩子不相互重叠？我错过了什么？

非常感谢任何建议/帮助/指导。谢谢！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700&display=swap');

        body {
            font-family: 'Raleway', sans-serif;
        }

        html {
            font-size: 62.5%;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            width: 85%;
            margin: 0 auto;
        }

        footer {
           background: #F6F8FA;
    }   

        .footer-logo {
            font-size: 2rem;
        }

        .footer-wrapper {
            height: 350px;
        }

        .footer-nav {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        .footer-menus {
            display: flex;
            position: relative;
            left: 125px;
            text-transform: uppercase;
            line-height: 40px;
            margin-top: 25px;
            border: 2px solid chartreuse;
        }

        .footer-menus a {
            color: #333333;
            font-size: 1.9rem;
            font-weight: 700;
            
        }

        .footer-links {
            margin-right: 25px;
        }

        .social-links {
            margin-right: 25px;
        }

        .legal {
            width: 275px;
            line-height: 30px;
            color: #777777;
            border: 2px solid peachpuff;
        }

        .thin-line {
            border-bottom: 1px solid #777777;
        }

        footer p {
            font-weight: 500;
            color: 777777;
        }
    </style>

</head>

<body>

    <footer>
        <div class="container">
            <div class="footer-wrapper">
                <nav class="footer-nav">
                    <div class="footer-logo">
                        <h3>travel</h3>
                    </div>

                    <div class="footer-menus">
                        <ul class="footer-links">
                            <li><a href="#">home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">blog</a></li>
                            <li><a href="#">contact</a></li>
                        </ul>

                        <ul class="social-links">
                            <li><a href="#">twitter</a></li>
                            <li><a href="#">facebook</a></li>
                            <li><a href="#">linkedin</a></li>
                        </ul>
                    </div>
                    <div class="legal">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
                            ipsam suscipit exercitationem possimus autem ad.</>
                    </div>
                </nav>
                <div class="thin-line"></div>
                <p>Travel Agency</p>
            </div>  
        </div>
    </footer>


</body>

</html>

这是一个代码笔：https://codepen.io/jmitchelreed/pen/MWeMBxd

【问题讨论】：

因为您使用的是固定宽度。
您的结束导航标签远远超出了您的“法律”类别的 div。

标签： html css footer

【解决方案1】：

最好使用 cmets 来指示您的元素之一的结束标记在哪里。当您在一个 html 中（例如在您的文件中）有很多嵌套项目、无组织的列表、div 和锚标记时，这非常有用。 HTML 注释不会出现在您的最终设计中。

您可以将它们放置在您喜欢的任何位置。考虑阅读this

您的结束导航元素有问题，它超出了“合法”类的 div 元素的结束标记。

</head>

<body>

    <footer>
        <div class="container">

            <div class="footer-wrapper">

                <nav class="footer-nav">

                    <div class="footer-logo">
                        <h3>travel</h3>
                    </div> <!-- Footer logo end -->

                    <div class="footer-menus">
                        <ul class="footer-links">
                            <li><a href="#">home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">blog</a></li>
                            <li><a href="#">contact</a></li>
                        </ul>
                        <ul class="social-links">
                            <li><a href="#">twitter</a></li>
                            <li><a href="#">facebook</a></li>
                            <li><a href="#">linkedin</a></li>
                        </ul>
                    </div> <!-- Footer menu end -->
                  </nav> <!-- Navbar end -->

                    <div class="legal">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
                            ipsam suscipit exercitationem possimus autem ad.</>
                    </div> <!--- Legal end -->

                <div class="thin-line"></div> <!-- Unless this was intended, there is an extra closing div tag in here -->
                <p>Travel Agency</p>
            </div> <!-- Should this be the closing tag for the "Thin line" class? -->
        </div> <!-- Container end -->
    </footer> <!-- footer end -->


</body>

</html>

【讨论】：

非常感谢您的回复和建议，我会注意的！我不确定它是否能解决我的问题，我做了一些调整，但我遇到了同样的问题：codepen.io/jmitchelreed/pen/MWeMBxd