堆栈内存溢出
  简体   繁体   English

我想从子菜单中添加房间菜单之间的距离

[英]I want to add a distance between my room menu from my sub-menu

 原文  2018-11-08 11:53:03  0   1    javascript/ html/ css

问题描述

I wanted to create a distance between my list items in my sub-menus and adding a padding doesn't seem to work. 我想在子菜单中的列表项之间创建一个距离，并且添加填充似乎无效。

Example: 例：

Room Lighting Accessories Contact About Us 房间照明配件联系我们
Living room 客厅
Dining room 饭厅
Home office or Study 家庭办公室或书房
Bedroom 卧室

It suppose to look like this, 它看起来像这样，

Room Lighting Accessories Contact About Us 房间照明配件联系我们

Living room 客厅
<----- padding------> <-----填充------>
Dining room 饭厅

Home office or Study 家庭办公室或书房

Bedroom 卧室

I don't have a very good English but i hope you guys get what i mean. 我的英语不太好，但是我希望你们能明白我的意思。 Thank you so much for the help. 非常感谢你的帮助。 

 var flag; myFunction(); function myFunction() { var x = document.getElementById("myTopnav"); var y = document.getElementById("mySubnav"); if (x.className === "topnav") { x.className += " responsive"; if (flag === 1) { y.className += " responsive"; } } else { if (x.className === "topnav responsive" && y.className === "subnav responsive") { flag = 1; } else if (x.className === "topnav responsive" && y.className !== "subnav responsive") { flag = 0; } else { y.className = "subnav"; } x.className = "topnav"; y.className = "subnav"; } } function subnavFunction() { var y = document.getElementById("mySubnav"); var x = document.getElementById("myTopnav"); if (y.className === "subnav") { y.className += " responsive"; } else { y.className = "subnav"; } } 
 html, body { margin: 0; padding: 20px; height: 100%; } header h1 { margin: 0; display: inline; } header ul { margin: 0; list-style-type: none; padding-left: 0px; } header ul li a { display: inline; padding-right: 20px; font-size: 18px; text-decoration: none; color: #444; transition: color 170ms ease-in-out, background-color 170ms ease-in-out; } header ul h1 a { padding-right: 20px; text-decoration: none; display: block; font-weight: normal; color: #444; } /* mouse over link */ header ul li a:hover { color: #999; text-decoration: none; } /* selected link */ header ul li a:active { color: #555; text-decoration: none; } .TitleHeader { color: #444; text-align: center; padding-top: 150px; font-family: "Times New Roman"; } .footer { text-decoration: none; } .topnav header ul li a { display: inline; padding-bottom: 20px; } .topnav .icon { position: absolute; display: none; right: 10px; top: 10px; color: #555; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; text-align: center; font-family: "Times New Roman"; } @media screen and (max-width: 699px) { .topnav ul li a { display: none; padding: 10px; } .topnav .icon { display: inline; position: absolute; top: 45px; right: 50px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; } .topnav.responsive .subnav .subIcon { display: inline-block; position: absolute; top: 75px; left: 100px; } header ul h1 a { display: block; text-align: center; -webkit-animation: fadein 1s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } } @media screen and (max-width: 699px) { .topnav.responsive ul li a { float: none; display: inline-block; text-align: left; padding-left: 10px; } a.subIcon { margin-left: 30px; } .subnav.responsive .subIcon { transform: rotate(90deg); transition: all .25s ease-out; } .subnav .subIcon { transition: all .25s ease-out; } .topnav .subnav.responsive ul li a { display: block; } .topnav .subnav.responsive ul { padding-left: 10px; } .topnav .subnav ul li a { display: none; } } @media screen and (min-width: 700px) { .topnav ul li { display: none; display: inline-block; -webkit-animation: fadein 1s; display: visible; } header ul h1 a { display: inline; } .topnav .icon { display: none; } .subnav .subIcon { display: none; } .subnav ul li { display: none; } .room:hover .subnav ul li { display: inline; } .subnav ul { position: absolute; display: inline; float: left; } .subnav ul li a { padding-top: 10px; padding: 10px 20px; } } .GreyText { color: #777; } 
 <!doctype html> <html> <head> <title> Home </title> <link href="mainCSS.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="wrapper"> <header> <div class="topnav" id="myTopnav"> <!-- Whole navigation menu --> <ul> <h1 class="first"><a href="MyWebsiteCSS.html">UrbanAero</a></h1> <li class="room"><a href="#">Rooms</a> <div class="subnav" id="mySubnav"> <ul class="boi"> <li><a href="#">Living room</a></li><br> <li><a href="#">Dining room</a></li><br> <li><a href="#">Home office and Study</a></li><br> <li><a href="#">Bedroom</a></li> <a href="javascript:void(0);" class="subIcon" onclick="subnavFunction();"><i class="fa fa-caret-down" aria-hidden="true"></i></a> </ul> </div> </li> <li><a href="#">lighting</a></li> <li><a href="#">Accessories</a></li> <li><a class="GreyText" href="ContactCSS.html">Contact</a></li> <li><a class="GreyText" href="AboutCSS.html">About Us</a></li> <li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"></li> <li><i class="fa fa-bars"></i></a> </li> </ul> </div> </header> <div class="push"> </div> </div> <footer class="footer">&#0169;UrbanAero</footer> </body> </html>

1 个解决方案

解决方案1
 0 已采纳  2018-11-08 12:14:14

When it comes to margins and padding, browsers treat inline elements differently. 在页边距和填充方面，浏览器对内联元素的处理方式有所不同。 You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. 您可以在行内元素的左侧和右侧添加空间，但不能在行内元素的顶部或底部填充或边距上添加高度。

In order to make the padding work, change your anchors to inline-block: 为了使填充起作用，请将锚点更改为inline-block： 

header ul li a{
  display: inline-block;
}

Updated code 更新的代码 

 var flag; myFunction(); function myFunction() { var x = document.getElementById("myTopnav"); var y = document.getElementById("mySubnav"); if (x.className === "topnav") { x.className += " responsive"; if (flag === 1) { y.className += " responsive"; } } else { if (x.className === "topnav responsive" && y.className === "subnav responsive") { flag = 1; } else if (x.className === "topnav responsive" && y.className !== "subnav responsive") { flag = 0; } else { y.className = "subnav"; } x.className = "topnav"; y.className = "subnav"; } } function subnavFunction() { var y = document.getElementById("mySubnav"); var x = document.getElementById("myTopnav"); if (y.className === "subnav") { y.className += " responsive"; } else { y.className = "subnav"; } } 
 html, body { margin: 0; padding: 20px; height: 100%; } header h1 { margin: 0; display: inline; } header ul { margin: 0; list-style-type: none; padding-left: 0px; } header ul li a { display: inline-block; padding-right: 20px; font-size: 18px; text-decoration: none; color: #444; transition: color 170ms ease-in-out, background-color 170ms ease-in-out; } header ul h1 a { padding-right: 20px; text-decoration: none; display: block; font-weight: normal; color: #444; } /* mouse over link */ header ul li a:hover { color: #999; text-decoration: none; } /* selected link */ header ul li a:active { color: #555; text-decoration: none; } .TitleHeader { color: #444; text-align: center; padding-top: 150px; font-family: "Times New Roman"; } .footer { text-decoration: none; } .topnav header ul li a { display: inline; padding-bottom: 20px; } .topnav .icon { position: absolute; display: none; right: 10px; top: 10px; color: #555; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; text-align: center; font-family: "Times New Roman"; } @media screen and (max-width: 699px) { .topnav ul li a { display: none; padding: 10px; } .topnav .icon { display: inline; position: absolute; top: 45px; right: 50px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; } .topnav.responsive .subnav .subIcon { display: inline-block; position: absolute; top: 75px; left: 100px; } header ul h1 a { display: block; text-align: center; -webkit-animation: fadein 1s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } } @media screen and (max-width: 699px) { .topnav.responsive ul li a { float: none; display: inline-block; text-align: left; padding-left: 10px; } a.subIcon { margin-left: 30px; } .subnav.responsive .subIcon { transform: rotate(90deg); transition: all .25s ease-out; } .subnav .subIcon { transition: all .25s ease-out; } .topnav .subnav.responsive ul li a { display: block; } .topnav .subnav.responsive ul { padding-left: 10px; } .topnav .subnav ul li a { display: none; } } @media screen and (min-width: 700px) { .topnav ul li { display: none; display: inline-block; -webkit-animation: fadein 1s; display: visible; } header ul h1 a { display: inline; } .topnav .icon { display: none; } .subnav .subIcon { display: none; } .subnav ul li { display: none; } .room:hover .subnav ul li { display: inline; } .subnav ul { position: absolute; display: inline; float: left; } .subnav ul li a { padding-top: 10px; padding: 10px 20px; } } .GreyText { color: #777; } 
 <!doctype html> <html> <head> <title> Home </title> <link href="mainCSS.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="wrapper"> <header> <div class="topnav" id="myTopnav"> <!-- Whole navigation menu --> <ul> <h1 class="first"><a href="MyWebsiteCSS.html">UrbanAero</a></h1> <li class="room"><a href="#">Rooms</a> <div class="subnav" id="mySubnav"> <ul class="boi"> <li><a href="#">Living room</a></li><br> <li><a href="#">Dining room</a></li><br> <li><a href="#">Home office and Study</a></li><br> <li><a href="#">Bedroom</a></li> <a href="javascript:void(0);" class="subIcon" onclick="subnavFunction();"><i class="fa fa-caret-down" aria-hidden="true"></i></a> </ul> </div> </li> <li><a href="#">lighting</a></li> <li><a href="#">Accessories</a></li> <li><a class="GreyText" href="ContactCSS.html">Contact</a></li> <li><a class="GreyText" href="AboutCSS.html">About Us</a></li> <li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"></li> <li><i class="fa fa-bars"></i></a> </li> </ul> </div> </header> <div class="push"> </div> </div> <footer class="footer">&#0169;UrbanAero</footer> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当我将光标移到侧边栏时，子菜单如何从侧边栏向下滑动 - how can the sub-menu slide down from the sidebar when i just take my cursor to it 我想在jQuery和css中为我的菜单项添加一个子元素 - I want to add a sub element to my menu items in jQuery and css 如何在jQuery悬停菜单中保持子菜单打开-请检查示例 - How can I keep my sub-menu open in jQuery hover menu - please check sample 我的子菜单未在safari中显示，但在chrome和Firefox中显示 - my sub-menu is not showing in safari but it's does in chrome and firefox 如何为我的网站创建一个水平滑动子菜单面板？ - How to create a horizontal sliding sub-menu panel for my site? 如何显示我网站的移动子菜单？ - How can I reveal my site's sub-menu for mobile? 子菜单问题 - Problems with the sub-menu 使用javascript将子菜单添加到垂直菜单 - Add sub-menu to vertical menu using javascript 我希望子菜单在鼠标移到上方时保持打开状态 - I want the sub-menu to remain open when the mouse moves over it 如何在选项卡中添加子菜单？ - How can I add sub menu to my tabs?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM