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

我想要做的是將菜單的水平大小限制爲任意數量和大小的選項。而且也是整個事情的中心。現在一切都在頂部，左邊是正確的。另外它也佔用了頁面的整個寬度。使用CSS中心和動態調整水平下拉菜單欄的大小

我希望它出現在標題圖片之後，並且以適合於選擇數量的動態大小爲中心。

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

來源

2017-06-06 user3590052

？這對我來說有點含糊：/ – Jagr

讓所以，你想整個頂部欄爲中心，還有什麼我知道，如果這有助於

* { 
 
    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>

來源

2017-06-06 21:46:53 Gerard

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

回答

相關問題