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

Question

当页面变小时，我不确定为什么我的菜单 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

Answer 1

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

你可以把它们放在你喜欢的任何地方。 考虑阅读这个

您的结束导航元素有问题，它超出了具有“合法”类的 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