为什么我的导航菜单不尊重CSS边距属性？
[英]Why won't my nav menu respect the CSS margin attributes?
问题描述
As the title says. 
如标题所示。 I can't seem to get my nav menu to respect the margin rules that I have set in the CSS. 我似乎无法让我的导航菜单遵守我在CSS中设置的边距规则。 Is the "float: left;" 是“浮：左；” property causing issues regarding the margins? 财产引起有关利润的问题？
I have very limited knowledge with HTML/CSS so any help would be greatly appreciated. 我对HTML / CSS的了解非常有限，因此不胜感激。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="description of the webpage"> <meta name="keywords" content="keywords for the webpage"> <meta name="author" content="your name and/or email here"> <title>First Webpage</title> <style> body { background-color: #2b2b2b; font-family: 'Arial Black', Gadget, sans-serif; font-style: normal; font-size: 12px; } /*------------------------------------NAV MENU---------------------------------------*/ nav ul { font-size: 20px; font-style: normal; font-family: 'Arial Black', Gadget, sans-serif; font-weight: bold; position: fixed; top: 0; width: 100%; list-style-type: none; margin-left: 35px; margin-bottom: 100px; padding: 0; overflow: hidden; background-color: #C63D0F; border-style: solid; border-size: 8px; border-color: #7E8F7C; border-radius: 5px; } nav li { border-right: 4px solid #7E8F7C; float: left; } nav li a { display: block; color: #FDF3E7; text-align: center; padding: 14px 16px; text-decoration: none; } nav li a:hover { background-color: #3B3738; } /*------------------------------------NAV MENU---------------------------------------*/ .education, .revlevant_work, .professional_experience, .skills, .activities { background-color: #3B3738; color: #FDF3E7; margin: 35px; padding: 15px; border-style: solid; border-width: 8px; border-color: #7E8F7C; border-radius: 15px; } </style> </head> <body> <div id="main_content"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Video Gallery</a> </li> <li><a href="#">Image Gallery</a> </li> <li><a href="#">Personal</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> <div> <div class="education"> <h1>Education</h1> <ul> <li> <p>Ajax High School 2010 - 2014</p> </li> <li> <p>Garduated in 2014 from <b>Ajax High School</b> with a Ontario Secondary School Diploma.</p> </li> <li> <p>George Brown College 2016 - Current</p> </li> <li> <p>Currently enrolled in Computer Systems Technology (T147) at <b>George Brown College.</b> </p> </li> </ul> </div> <div class="revlevant_work"> <h1>Relevant Course Work</h1> <ul> <li> <p> </ul> </div> <div class="professional_experience"> <h1>Professional experience</h1> <ul> <li> <p>Salvation Army Thrift Store</p> </li> <li> <p>Aspect Logistics</p> </li> <li> <p>All Maintenance Contractors</p> </li> <li> <p>Canadian Tire</p> </li> </ul> </div> <div class="skills"> <h1>Skills</h1> <ul> <li> <p>Understanding of Computer Systems and the Operation of Software</p> </li> <li> <p>Communication Skills</p> </li> <li> <p>Adaptability/Flexibility</p> </li> <li> <p>Leadership/Management Skills</p> </li> </ul> </div> <div class="activities"> <h1>Activities</h1> <ul> <li> <p>Reading</p> </li> <li> <p>Video Games</p> </li> <li> <p>Art/Concept Art</p> </li> </ul> </div> </div> <footer> <!-- edit/no content --> </footer> </div> </body> </html>
1 个解决方案
解决方案1
0 2016-10-28 17:28:34
When the position property is used with a different value than the default static , the element is removed from the normal document flow. 当position属性的值与默认static值不同时，将从正常文档流中删除该元素。
When this is done, margins are no longer affecting the flow of the document. 完成此操作后，边距将不再影响文档的流程。 That's why the elements are not 'pushed' down. 这就是为什么元素没有被“推”下来的原因。 I recommend reading this . 我建议读这篇 。
Code Snippet: 代码段：
* { box-sizing: border-box; } body { background-color: #2b2b2b; font-family: 'Arial Black', Gadget, sans-serif; font-style: normal; font-size: 12px; margin: 0; } main, [role="main"] { margin-top: 100px; } /*------------------------------------NAV MENU---------------------------------------*/ header { position: fixed; top: 0; left: 0; width: 100%; background-color: #2b2b2b; } nav { margin-left: 35px; margin-right: 35px; } nav ul { font-size: 20px; font-style: normal; font-family: 'Arial Black', Gadget, sans-serif; font-weight: bold; list-style-type: none; padding: 0; overflow: hidden; background-color: #C63D0F; border-style: solid; border-width: 8px; border-color: #7E8F7C; border-radius: 5px; margin-bottom: 0; } nav li { border-right: 4px solid #7E8F7C; float: left; } nav li a { display: block; color: #FDF3E7; text-align: center; padding: 14px 16px; text-decoration: none; } nav li a:hover { background-color: #3B3738; } /*------------------------------------NAV MENU---------------------------------------*/ .education, .revlevant_work, .professional_experience, .skills, .activities { background-color: #3B3738; color: #FDF3E7; margin: 35px; padding: 15px; border-style: solid; border-width: 8px; border-color: #7E8F7C; border-radius: 15px; }
<header> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Video Gallery</a> </li> <li><a href="#">Image Gallery</a> </li> <li><a href="#">Personal</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </header> <main id="main_content" role="main"> <section class="container"> <div class="education"> <h1>Education</h1> <ul> <li> <p>Ajax High School 2010 - 2014</p> </li> <li> <p>Garduated in 2014 from <b>Ajax High School</b> with a Ontario Secondary School Diploma.</p> </li> <li> <p>George Brown College 2016 - Current</p> </li> <li> <p>Currently enrolled in Computer Systems Technology (T147) at <b>George Brown College.</b> </p> </li> </ul> </div> <div class="revlevant_work"> <h1>Relevant Course Work</h1> <ul> <li> <p></p> </ul> </div> <div class="professional_experience"> <h1>Professional experience</h1> <ul> <li> <p>Salvation Army Thrift Store</p> </li> <li> <p>Aspect Logistics</p> </li> <li> <p>All Maintenance Contractors</p> </li> <li> <p>Canadian Tire</p> </li> </ul> </div> <div class="skills"> <h1>Skills</h1> <ul> <li> <p>Understanding of Computer Systems and the Operation of Software</p> </li> <li> <p>Communication Skills</p> </li> <li> <p>Adaptability/Flexibility</p> </li> <li> <p>Leadership/Management Skills</p> </li> </ul> </div> <div class="activities"> <h1>Activities</h1> <ul> <li> <p>Reading</p> </li> <li> <p>Video Games</p> </li> <li> <p>Art/Concept Art</p> </li> </ul> </div> </section> </main> <footer> <!-- edit/no content --> </footer>
Make sure to read about semantic HTML too, some element tags were changed in the demo to guide you in the right direction. 确保还阅读了语义HTML，演示中对某些元素标签进行了更改，以指导您朝着正确的方向发展。 Here are some Frontend Guidelines . 这是一些前端准则 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的导航下拉菜单中心不在页面上？ - Why won't my nav drop down menu center on the page?
为什么我的导航栏中心不？ - Why won't my nav bar center?
导航菜单不会显示 - Nav menu won't show
导航菜单不会扩展 - nav menu won't expand
为什么我的HTML表不遵守指定的布局？ - Why won't my HTML table respect the specified layout?
为什么Chrome不能正确遵守利润率？ - Why Chrome doesn't respect the margin properly?
为什么我的 CSS column-span 元素不尊重上面列中块的边距底部？ - Why does my CSS column-span element not respect margin-bottom of blocks in the columns above?
为什么我的导航元素不能居中或更改样式？ - Why won't my nav element go to the center or change style?
为什么我的背景导航栏不改变颜色？ - Why won't my background Nav bar change colour?
为什么我的导航按钮或按钮文本不会移到中心？ - Why won't my nav button or button text move to the center?
相关标签