使用CSS居中並動態調整水平下拉菜單欄的大小

Question

我想做的是將菜單的水平大小限制為任意數量和大小的選項。 並且將整個事情放在中心。 現在，一切都在頂部，左對齊。 此外，它還占用了頁面的整個寬度。

我希望它出現在標題圖像之后，並以適合選擇數量的動態大小居中。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="Width=device-Width, initial-scale=1">
        <style>
            /* CSSTerm.com Horizontal Easy DropDown CSS menu */

            .drop_menu {
                position:relative;
                background:#005555;
                padding:0;
                margin:auto;
                list-style-type:none;
                height:40px;
                width:360;
            }
            .drop_menu li {
            float:left;
            display:inline-block;
            }
            .drop_menu li a {
                padding:12px 20px;
                display:block;
                color:#fff;
                text-decoration:none;
                font:12px arial, verdana, sans-serif;
                border-right:1px solid #75809a;
            }

            /* Submenu */
            .drop_menu ul {
                text-align: center;
                position:absolute;
                left:-9999px;
                top:-9999px;
                list-style-type:none;
                display:inline;
            }
            .drop_menu li:hover { position:relative; background:#75809a;  }
            .drop_menu li:hover ul {
                left:0px;
                top:38px;
                background:#75809a;
                padding:0px;
            }

            .drop_menu li:hover ul li a {
                padding:10px;
                display:block;
                width:168px;
                text-indent:15px;
                background-color:#75809a;
            }
            .drop_menu li:hover ul li a:hover { background:#005555;  }

        </style>
        <title>Home menu for YavapaiNA.org site</title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/Version_1_0_1.js"></script>
        <SCRIPT TYPE="text/javascript">
            //      var ScreenWidth = document.documentElement.clientWidth;
            //      var ScreenHeight = document.documentElement.clientHeight;

            var LeftsideMeetingsPopup = ((document.documentElement.clientWidth / 2) - 550);
            var TopOfMeetingsPopup = ((document.documentElement.clientHeight / 2) - 300);

            var LeftsideEventsPopup = ((document.documentElement.clientWidth / 2) - 300);
            var TopOfEventsPopup = ((document.documentElement.clientHeight / 2) - 230);

            var MeetingsParams = 'Width=1100,Height=600,Left=' + LeftsideMeetingsPopup + ',Top=' + TopOfMeetingsPopup + ',scrollbars=no';
            var EventsParams = 'Width=600,Height=460,Left=' + LeftsideEventsPopup + ',Top=' + TopOfEventsPopup + ',scrollbars=no';


            function Meetings_Popup(mylink, windowname) {
             if (!window.focus) return true;
             var href;
             if (typeof(mylink) == 'string') href = mylink;
             else href = mylink.href;
             window.open(href, windowname, MeetingsParams);
             return false;
            }

            function Events_Popup(mylink, windowname) {
             if (!window.focus) return true;
             var href;
             if (typeof(mylink) == 'string') href = mylink;
             else href = mylink.href;
             window.open(href, windowname, EventsParams);
             return false;
            }
            //          alert(MeetingsParams);
            //          alert(EventsParams);

        </SCRIPT>
    </head>
    <body>
        <div align="center" style="width:360">
            <ul class="drop_menu">
                <li><a href="#">Home</a></li>
                <li><A HREF="/Meetings_Popup.html" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a></li>
                <li><A HREF="/Events_Popup.html" onClick="return Events_Popup(this, 'notes')">Events</a></li>
                <li>
                    <a href='#'>Misc Links</a>
                    <ul>
                        <li><a href="#">Arizona</a></li>
                        <li><a href="#">Camp Verde</a></li>
                        <li><a href="#">Some Services</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

Answer 1

讓我知道這是否有幫助

 * { box-sizing: border-box; } .drop_menu { background: #005555; list-style-type: none; height: 40px; width: 460px; display: flex; padding: 0; margin:0 auto; } img { float: left; } .drop_menu li a { padding: 12px 20px; display: inline-block; color: #fff; text-decoration: none; font: 12px arial, verdana, sans-serif; } .drop_menu > li { border-right: 1px solid #75809a; width: 100%; text-align: center; } .drop_menu > li:last-child { border-right: none; } /* Submenu */ .drop_menu ul { text-align: left; position: absolute; left: -9999px; top: -9999px; list-style-type: none; display: inline; } .drop_menu li:hover { position: relative; background: #75809a; } .drop_menu li:hover ul { left: 0px; top: 38px; background: #75809a; padding: 0px; } .drop_menu li:hover ul li a { padding: 10px; display: block; width: 168px; text-indent: 15px; background-color: #75809a; } .drop_menu li:hover ul li a:hover { background: #005555; }

 <div style="width:100%; background-color: red; height: 100px;"> <img src="http://placehold.it/100x40" /> <ul class="drop_menu"> <li><a href="#">Home</a></li> <li><a href="/Meetings_Popup.html" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a></li> <li><a href="/Events_Popup.html" onClick="return Events_Popup(this, 'notes')">Events</a></li> <li> <a href='#'>Misc Links</a> <ul> <li><a href="#">Arizona</a></li> <li><a href="#">Camp Verde</a></li> <li><a href="#">Some Services</a></li> </ul> </li> </ul> </div>

使用CSS居中並動態調整水平下拉菜單欄的大小

問題描述

1 個解決方案

解決方案1
0 已采納 2017-06-06 21:46:53

使用CSS居中並動態調整水平下拉菜單欄的大小

問題描述

1 個解決方案

解決方案1 0 已采納 2017-06-06 21:46:53

解決方案1
0 已采納 2017-06-06 21:46:53