我有这门课:
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
}
...应用于此:
<template name="mnuScheduler">
<ul class="top-level-menu">
...然而，菜单栏(由 uls 和 lis 组成)位于其下方元素(HTML 表格)的正上方，动态加载的模板排在其右侧。
根据 CSS，菜单栏和表格之间应该有一些空间，模板应该显示在菜单栏下方，就像 HTML 表格在被另一个模板取代(使用 Meteor 的 Template.dynamic)之前所做的那样，目前只是一个占位符。
这是它的样子:
那么为什么宽度应该为 100% 而底部应该有边距的元素却没有呢？
更新
这是相关的 CSS 和 HTML(这是来自 Meteor 应用程序，因此 HTML 中混合了空格键代码(模板语言))。
CSS:
/* Menu-specific styles/rules */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #999999;
}
.third-level-menu > li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: navy;
}
.second-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0;
position: absolute;
top: 0;
width: 60%;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
//width: 150px;
width: 20%;
background: black;
}
.top-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: bold 16px Candara, Calibri, 'Segoe UI', serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
margin-bottom: 12px;
}
.top-level-menu a:hover {
color: #000000;
}
/* End of Menu-specific Styles */
HTML:
<head>
<TITLE>Crew Scheduler</TITLE>
</head>
<body TEXT="#000000">
<div class="container">
{{> mnuScheduler}}
{{> Template.dynamic template=currentTemplate}}
</div>
</body>
<template name="mnuScheduler">
<ul class="top-level-menu">
<li> <a href="#">Schedules</a>
<ul class="second-level-menu">
<li name="mniOpenExisting" id="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li name="mniCreateNewScheduleBasedOnExisting" id="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li name="mniCreateNewScheduleFromScratch" id="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li name="mniSaveCurrentSchedule" id="mniSaveCurrentSchedule">Save Current</li>
<li name="mniEmailCurrentSchedule" id="mniEmailCurrentSchedule">Email Current</li>
<li name="mniPrintCurrentSchedule" id="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li><a href="#">Job/Locations</a>
<ul class="second-level-menu">
<li name="mniAddNewJobLoc" id="mniAddNewJobLoc">Add New</li>
<li name="mniViewOrEditJobLoc" id="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li><a href="#">Workers</a>
<ul class="second-level-menu">
<li name="mniAddNewWorker" id="mniAddNewWorker">Add New</li>
<li name="mniViewOrEditWorker" id="mniViewOrEditWorker">View or Edit</li>
<li name="mniWorkerPreferences" id="mniWorkerPreferences">Preferences</li>
</ul>
</li>
<li><a href="#">Rules</a>
<ul class="second-level-menu">
<li name="mniSetRules" id="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li><a href="#">Help</a>
<ul class="second-level-menu">
<li name="mniAbout" id="mniAbout">About</li>
<li name="mniHowTo" id="mniHowTo">How To...</li>
<li name="mniContact" id="mniContact">Contact Us</li>
<li name="mniAcquireLicense" id="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</template>
最佳答案
.top-level-menu{
width:100%;
display:block;
}你修改css类.top-level-menu
关于html - 为什么一个应该是 100% 宽度的元素在它的右边有一个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32482155/