移動視圖中導航欄對齊和下拉菜單出現問題

Question

我的導航欄，尤其是我的DropDown菜單出現問題。

如果用戶設備的寬度不足以顯示我所有的導航欄鏈接，那么我的導航欄會進入“子菜單” /“移動導航欄”，但是，當加載此視圖時，我的下拉菜單顯示不正確（我會提供下面的gif）。

https://gyazo.com/0be3c18b17ca6844b45504ccf7bef943

如GIF所示，我的“主頁”菜單進入左上角，而“移動切換菜單”進入右下角，是否可以解決此問題？ 我仍然希望“主頁”位於左側，“移動菜單”位於右側，我希望它們正確對齊（“左中心”和“右中心”），因為目前它們是對角的，看起來相當不錯。 由於某些原因，它還會增加菜單的高度，從而留出空白空間，這是不理想的，因為“移動視圖”的重點是節省頁面空間。

修復對齊問題的任何幫助將不勝感激。

（在“移動視圖”中，下拉菜單也與中間對齊，是否有辦法像在“移動視圖”中的其他項目一樣使下拉子菜單與左側對齊？）

CSS和HTML

<!DOCTYPE html>

<html>

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

    <!-- Load an icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Change Navbar view if device has a small width -->
    <script>
        function MobileNav() {
            var x = document.getElementById("myTopnav");
            if (x.className === "navbar") {
                x.className += " responsive";
            } else {
                x.className = "navbar";
            }
        }
    </script>

    <style>
        html {
            color: white;
            margin: 0 auto;
            width: 90%;
            height: 90%;
        }

        .navbar, .holder, .dropdown, .dropbtn, dropdown-content {
            text-align: center;
        }

        /* Style the navigation bar */
        .navbar {
            width: 100%;
            background-color: #555;
            overflow: hidden;
        }

            /* Navbar links */
            .navbar a {
                display: inline-block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                /* Navbar links on mouse-over */
                .navbar a:hover {
                    background-color: #000;
                }

        /* Current/active navbar link */
        .active {
            background-color: #4CAF50;
        }


        /* Hide the link that should open and close the navbar on small screens */
        .navbar .icon {
            display: none;
        }


        /*--------------------------------------------------------*/
        /* Related to Dropdown Menu */

        /* Show the dropdown menu when the user moves the mouse over the dropdown button */
        .dropdown:hover .dropdown-content {
            display: inline-block
        }

        /* Style the dropdown button to fit inside the navbar */
        .dropdown .dropbtn {
            font-size: 17px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        /* Style the dropdown content (hidden by default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            /* Style the links inside the dropdown */
            .dropdown-content a {
                float: none;
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

        /* Add a dark background on navbar links and the dropdown button on hover */
        .navbar a:hover, .dropdown:hover .dropbtn {
            background-color: #555;
            color: white;
        }

        /* Add a grey background to dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Dropdown container - to position the dropdown content */
        .dropdown {
            display: inline-block;
            text-align: left;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }


        /* When the screen is less than 680 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
        @media screen and (max-width: 680px) {
            /*Hide all menu's except for "Home"*/
            .navbar a:not(:first-child), .dropdown .dropbtn {
                display: none; 
                overflow:hidden;
            }

                /* Align "Home" to left side*/
                .navbar a:first-child {
                float: left;
                display: inline-block;
            }

            /* Align Mobile Navbar to right side*/
            .navbar a.icon {
                float: right;
                display: inline-block;
            }
        }

        /* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
        @media screen and (max-width: 680px) {
            .navbar.responsive {
                position: relative;
            }

                .navbar.responsive a.icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }

                .navbar.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                }

                .navbar.responsive .dropdown {
                    float: none;
                }

                .navbar.responsive .dropdown-content {
                    position: relative;
                }

                .navbar.responsive .dropdown .dropbtn {
                    display: block;
                    width: 100%;
                    text-align: left;
                }
        }
    </style>

</head>


<body>

    <div class="navbar" id="myTopnav">

        <div class="holder">

            <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
            <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
            <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

            <div class="dropdown">
                <button class="dropbtn">
                    Dropdown
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>

        </div>

        <a href="javascript:void(0);" class="icon" onclick="MobileNav()">&#9776;</a>
    </div>

</body>

</html>

Answer 1

對於第一個問題，請考慮在導航欄中為類別添加“持有人”

<body>
<div class="navbar" id="myTopnav">

    <div class="holder">

        <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
        <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
        <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
        <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

    </div>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>
</body>

完成此操作后，您將可以在css文件中對該持有人進行樣式設置以使其適合屏幕中心。

.navbar .holder {

    text-align: center;

}

這應該可以自動完成，並將所有文本放在導航欄中。

移動視圖中導航欄對齊和下拉菜單出現問題

問題描述

1 個解決方案

解決方案1
1 2019-02-27 21:38:34

移動視圖中導航欄對齊和下拉菜單出現問題

問題描述

1 個解決方案

解決方案1 1 2019-02-27 21:38:34

解決方案1
1 2019-02-27 21:38:34