CSS调整水平下拉菜单的大小

Question

I would like to have some control over the width of the menu bar, as an example it would be great if each item only used 5px for each side as padding. 我想对菜单栏的宽度进行一些控制，例如，如果每个项目每边仅使用5px作为填充，那将是很棒的。 Presently the entire menu uses too much screen width on mobile devices. 目前，整个菜单在移动设备上使用的屏幕宽度太大。

    <!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>
* {
box-sizing: border-box;
}
.drop_menu {
position: relative;
background: #005555;
list-style-type: none;
height: 40px;
width: 460px;
display: flex;
padding: 0;
margin:0 auto;
background-image: url("http://snaklvr.com/bg.jpg");
}
img {
float: center;
}
.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;
}

tbody div{
overflow:scroll;
height:400px;
}

#InTheCenter {
text-align:center;
}


div.topdiv {
clear: both;
position: fixed;
top: 0;
height: 60%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
left: 400;
}

div.bottomdiv {
clear: both;
position: fixed;
top: 60%;
height: 40%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}


</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<SCRIPT TYPE="text/javascript">
var LeftsideMeetingsPopup = ((document.documentElement.clientWidth / 2) - 550);
var TopOfMeetingsPopup = ((document.documentElement.clientHeight / 2) - 300);

var LeftsideEventsPopup = ((document.documentElement.clientWidth / 2) - 310);
var TopOfEventsPopup = ((document.documentElement.clientHeight / 2) - 180);

var MeetingsParams = 'Width=1100,Height=600,Left=' + LeftsideMeetingsPopup + ',Top=' + TopOfMeetingsPopup + ',scrollbars=no';
var EventsParams = 'Width=620,Height=360,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;
}
</SCRIPT>
</head>
<body bgcolor="#bfb9b5">
<div class="topdiv">
<div class="InTheCenter">
<br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/>
</div>
<div>
</BR>
<ul class="drop_menu">
<li><A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a></li>
<li><A href="#" onClick="return Events_Popup(this, 'notes')">Events</a></li>
<li>
<A href='#'>Misc Links</a>
<ul>
<li><A target="_blank" href="http://www.amazon.com/">Amazon</a></li>
<li><A target="_blank" href="http://www.google.com">Google</a></li>
<li><A target="_blank" href="https://lowes.com/">Lowes</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

Answer 1

Change the width of the menu to max-width so that it will scale to a smaller size, and change the horizontal padding on the links to 5px (or whatever you want to use there) 将菜单的width更改为max-width以便将其缩放到较小的尺寸，并将链接上的水平填充更改为5px（或在此处使用的任何值）

 <!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> * { box-sizing: border-box; } .drop_menu { position: relative; background: #005555; list-style-type: none; height: 40px; max-width: 460px; display: flex; padding: 0; margin: 0 auto; background-image: url("http://snaklvr.com/bg.jpg"); } img { float: center; } .drop_menu li a { padding: 12px 5px; 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; } tbody div { overflow: scroll; height: 400px; } #InTheCenter { text-align: center; } div.topdiv { clear: both; position: fixed; top: 0; height: 60%; width: 100%; background-color: #bfb9b5; color: #FFFFFF; font-size: 16px; text-align: center; left: 400; } div.bottomdiv { clear: both; position: fixed; top: 60%; height: 40%; width: 100%; background-color: #bfb9b5; color: #FFFFFF; font-size: 16px; text-align: center; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <SCRIPT TYPE="text/javascript"> var LeftsideMeetingsPopup = document.documentElement.clientWidth / 2 - 550; var TopOfMeetingsPopup = document.documentElement.clientHeight / 2 - 300; var LeftsideEventsPopup = document.documentElement.clientWidth / 2 - 310; var TopOfEventsPopup = document.documentElement.clientHeight / 2 - 180; var MeetingsParams = "Width=1100,Height=600,Left=" + LeftsideMeetingsPopup + ",Top=" + TopOfMeetingsPopup + ",scrollbars=no"; var EventsParams = "Width=620,Height=360,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; } </SCRIPT> </head> <body bgcolor="#bfb9b5"> <div class="topdiv"> <div class="InTheCenter"> <br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/> </div> <div> </BR> <ul class="drop_menu"> <li> <A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a> </li> <li> <A href="#" onClick="return Events_Popup(this, 'notes')">Events</a> </li> <li> <A href='#'>Misc Links</a> <ul> <li> <A target="_blank" href="http://www.amazon.com/">Amazon</a> </li> <li> <A target="_blank" href="http://www.google.com">Google</a> </li> <li> <A target="_blank" href="https://lowes.com/">Lowes</a> </li> </ul> </li> </ul> </div> </div> </body> </html>

CSS调整水平下拉菜单的大小

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-06-11 23:54:14

CSS调整水平下拉菜单的大小

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-06-11 23:54:14

解决方案1
1 已采纳 2017-06-11 23:54:14