CSS調整水平下拉菜單的大小
[英]css Adjust the size for horizontal drop down menu
問題描述
我想對菜單欄的寬度進行一些控制，例如，如果每個項目每邊僅使用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;
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>
1 個解決方案
解決方案1
1 已采納 2017-06-11 23:54:14
將菜單的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>
如何調整下拉菜單項 <ul> 使用CSS列屬性？
[英]How to adjust drop-down menu item in <ul> with the use of css columns property?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.