为什么我的CSS没有应用？ [英] Why is my CSS not being applied?
本文介绍了为什么我的CSS没有应用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个以这样开头的导航/菜单栏：
I've got a nav/menu bar that starts like this:
<nav>
<ul class="top-level-menu">
这是CSS类：
Here is the CSS class:
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
}
但是，100％宽度不起作用，边距底部设置也不起作用。导航和表格上的下一个元素之间没有任何空间（垂直）;为什么不存在12px的死区？
此外，当我以编程方式替换导航/菜单栏（HTML表格）下面的元素时带有占位符一点点HTML，而不是在菜单下面显示*，它显示在右边。导航/菜单的100％宽度是否应该阻止任何东西放在右边？
对于那些有探究心态的人，这里是导航的整个HTML /菜单栏：
However, the 100% width is not working, nor is the margin-bottom setting. There is no space whatsoever between the nav and the next element on the form (vertically); why isn't there 12px of "dead space"?
Also, when I programmatically replace the element below the nav/menu bar (an HTML Table) with a "placeholder" bit of HTML, rather than displaying *beneath* the menu, it displays to the right. Shouldn't the 100% width of the nav/menu prevent anything from being placed to its right?
For those with inquiring minds, here's the entire HTML of the nav/menu bar:
<nav>
<ul class="top-level-menu">
<li>Schedules
<ul class="second-level-menu">
<li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
<li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
<li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li>Job/Locations
<ul class="second-level-menu">
<li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
<li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li>Workers
<ul class="second-level-menu">
<li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
<li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
<li id="mniWorkerPreferences" name="mniWorkerPreferences">Preferences</li>
</ul>
</li>
<li>Rules
<ul class="second-level-menu">
<li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li>Help
<ul class="second-level-menu">
<li id="mniAbout" name="mniAbout">About</li>
<li id="mniHowTo" name="mniHowTo">How To...</li>
<li id="mniContact" name="mniContact">Contact Us</li>
<li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</nav>
...这里是我动态添加的元素，最后是导航/菜单的右侧吧而不是它下面：
...and here's the element that I dynamically add, which ends up to the right of the nav/menu bar rather than below it:
<h2 class="floatleft">Open Existing Schedule</h2>
...及其使用的课程：
...and the class it uses:
.floatleft {
float: left;
display: block;
}
对于真的好奇，这里是所有的CSS：
For the really curious, here is all the CSS:
html {
font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
body {
font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
background-color: lightyellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
/* test - added 9/9/2015 */
width:80%;
margin-left:auto;
margin-right:auto;
/* end test - added 9/9/2015 */
}
nav {
background-color: forestgreen;
}
form {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: "Segoe UI", serif;
font-size: 2.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
h2 {
font-family: 'Bookman Old Style', Verdana, sans-serif;
}
table {
width: 1200px;
margin: 0 auto;
background-color: azure;
/*min-height: 100%;*/
margin-top: 80px;
}
table, th, td {
border: 1px solid navy;
border-collapse: collapse;
}
th, td {
padding: 5px;
/*text-align: left;*/
}
input[type="time"] {
margin: 3px;
}
p {
font-size: 14px;
}
/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
width: 88px;
display: inline-block;
}
.hide {
visibility: hidden;
display: none;
}
.smallcaps {
font-variant: small-caps;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: lightyellow;
}
.dateLabel {
font-size: 16px;
font-family: Candara, 'Segoe UI', sans-serif;
color: forestgreen;
}
.shiftLabel {
font-size: 13px;
font-family: Calibri, serif;
color: red;
}
.jobLoc {
margin-right: 16px;
width: 115px;
}
.jobLocCount {
width: 40px;
}
.trabajar {
width: 159px;
margin-right: 16px;
margin-top: 4px;
}
.shortTextInput {
width: 64px;
}
.floatleft {
float: left;
display: block;
}
/* Menu-specific styles/rules, adapted from */
.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: gray;
}
.third-level-menu > li:hover {
background: white;
}
.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: orange;
color: white;
}
.second-level-menu > li:hover {
background: green;
}
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
/*border: 1px; <= not working*/
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: moccasin;
}
.top-level-menu > li:hover {
background: lightgray;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* End of Menu-specific Styles */
推荐答案
这只是一团糟， 这就是为什么。属性width =100％是适用的（并且是此元素的默认值，因此它是多余的），但不会导致您的子元素分布在窗口客户端大小区域，因此您会有这样的印象：工作。
依旧...
现在我看到你的想法背叛了你，如在如何提供导航/菜单栏有不同的背景颜色？ [ ^ ]（目前的问题几乎是重新发布）。
您在心理上将父元素的属性传递给子元素，但是使用子元素的行为覆盖可感知的父行为。
-SA
This is just a lump of mess, that's why. The property width="100%" is applicable (and is default for this element, so it is redundant), but won't cause your child elements to spread across the window client size area, so you have the impression that it does not work.
And so on…
Now I see that it's your way of thinking betrays you, as in How can I give the Nav/Menu Bar a different backgroud color?[^] (the present question is almost a re-post).
You mentally transfer the properties of a parent element to a child element, but override the perceivable parent behavior with the behavior of children.
—SA
这只是一团糟，这就是原因。属性width =100％是适用的（并且是此元素的默认值，因此它是多余的），但不会导致您的子元素分布在窗口客户端大小区域，因此您会有这样的印象：工作。
依旧...
现在我看到你的想法背叛了你，如在如何提供导航/菜单栏有不同的背景颜色？ [ ^ ]（目前的问题几乎是重新发布）。
你没有接受我的回答，所以我怀疑你没有得到它。提出一个新问题并不是那么有用。
您在心理上将父元素的属性传递给子元素，但是使用以下行为覆盖可感知的父行为孩子。
-SA
This is just a lump of mess, that's why. The property width="100%" is applicable (and is default for this element, so it is redundant), but won't cause your child elements to spread across the window client size area, so you have the impression that it does not work.
And so on…
Now I see that it's your way of thinking betrays you, as in How can I give the Nav/Menu Bar a different backgroud color?[^] (the present question is almost a re-post).
You did not accept my answer, so I suspect you did not get it. Asking a new question is not so helpful then.
You mentally transfer the properties of a parent element to a child element, but override the perceivable parent behavior with the behavior of children.
—SA
这篇关于为什么我的CSS没有应用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
