为什么我的页脚导航菜单与它们右侧的法律文本重叠，我该如何防止？

Question

I am not sure why my menu div is overlapping the legal ipsum when the page is made smaller?当页面变小时，我不确定为什么我的菜单 div 与合法 ipsum 重叠？ I've wrapped them in different coloured borders just to illustrate.我将它们包裹在不同颜色的边框中只是为了说明。 Included is the HTML and CSS.包括 HTML 和 CSS。

Right now I have it set to flexbox, space-between and the legal div has a fixed pixel width.现在我将它设置为 flexbox，space-between 并且合法的 div 具有固定的像素宽度。 I thought this was enough to have the flex children not overlap each other?我认为这足以让 flex 孩子不相互重叠？ What am I missing?我错过了什么？

Any advice/help/guidance is very much appreciated.非常感谢任何建议/帮助/指导。 Thanks!谢谢！

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

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

Answer 1

It´s good practice to use comments to indicate where a closing tag for one of your elements are.使用注释来指示元素之一的结束标记的位置是一种很好的做法。 This is mostly useful for when you have a lot of nested items, unorganized lists, divs, and anchor tags all in just one html, such as in your file.当您在一个 html 中（例如在您的文件中）有大量嵌套项、无组织列表、div 和锚标记时，这非常有用。 A HTML comment will not appear in your final design. HTML 注释不会出现在您的最终设计中。

You can place them anywhere you like.你可以把它们放在你喜欢的任何地方。 Consider reading this考虑阅读这个

You have a problem with your closing nav element, its beyond the closing tag for your div element with the class of "legal".您的结束导航元素有问题，它超出了具有“合法”类的 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>

为什么我的页脚导航菜单与它们右侧的法律文本重叠，我该如何防止？

问题描述

1 个解决方案

解决方案1
0 2020-11-21 23:20:26

为什么我的页脚导航菜单与它们右侧的法律文本重叠，我该如何防止？

问题描述

1 个解决方案

解决方案1 0 2020-11-21 23:20:26

解决方案1
0 2020-11-21 23:20:26