為什么我的頁腳導航菜單與它們右側的法律文本重疊，我該如何防止？

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