Question

我有这堂课：

.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＆＃39; s） Template.dynamic）由另一个模板，现在只是一个占位符。

这就是它的样子：

那么为什么一个元素宽度不应该是100％，而哪个元素应该在底部有一个边距呢？

更新

以下是相关的CSS和HTML（这是来自Meteor应用程序，因此HTML中混合了Spacebars代码（模板语言））。

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>

Answer 1

%中的宽度或高度通常与父元素有关。在这种情况下，name="mnuScheduler"的宽度可能小于视口宽度的100％，这就是孩子的宽度小于视口宽度的100％的原因。

您可以使用width: 100vw;上的.top-level-menu来解决此问题。

那说仔细看看标记和造型，也许是一个小提琴不会受伤。

Answer 2

.top-level-menu{
width:100%;
  display:block;
}

修改css类.top-level-menu

为什么宽度为100％的元素右边有一个元素？

更新

2 个答案: