我正在构建一个下拉导航栏，模仿美国宇航局主页上的导航栏。在撰写本文时尚未完成，所以不要指望它看起来像它。我的问题是我有一个包含普通列表的内联列表。当我没有指定普通列表应该填充内联列表项的100％时，它们会在奇数点处换行。但是，当我指定它时，我发现我必须在声明中添加！important。我想知道为什么会这样，因为我一般都避免使用！重要，特别是因为我不知道它有什么必要。我已经包含了所有代码，因为我不知道问题是什么。 css可能看起来有点奇怪，因为我正在使用标记here的修改版本。
这是我的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Team 422 | Mech Tech Dragons</title>
<link rel="stylesheet" type="text/css" href="standardLayout.css" />
</head>
<body>
<div class="header">
<img src="./MTDLogoHeader.png" alt="Team 422 Logo" class="team422Logo headerElement"/>
<div class="navigation">
<ul class="mainNavBar headerElement">
<li> <!--The odd-looking closing tags on the list items are intentional. They fix cross-browser compatability issues-->
<div> <!--These divs are unfortunately non-semantic. They allow the nvigation bar to resize properly-->
<h1>Home</h1>
<h2>Welcome</h2>
</div>
</li
><li>
<div>
<h1>About</h1>
<h2>Our Vision</h2>
</div>
</li
><li>
<div>
<h1>Team</h1>
<h2>Who We Are</h2>
</div>
</li
><li>
<div>
<h1>Projects</h1>
<h2>What We Do</h2>
</div>
</li
><li>
<div>
<h1>Media</h1>
<h2>Pics & Blog</h2>
</div>
</li
><li>
<div>
<h1>Resources</h1>
<h2>Documents, Etc.</h2>
</div>
</li>
</ul>
<ul class="dropDownNav headerElement">
<li id="home">
</li
><li id="about">
<ul>
<li>
<h1>About FIRST</h1>
</li
><li>
<h1>About The Team</h1>
</li
><li>
<h1>About This Site</h1>
</li
><li>
<h1>FIRST Resources</h1>
</li>
</ul>
</li
><li id="team">
<ul>
<li>
<h1>Structure</h1>
</li
><li>
<h1>Subteams</h1>
<ul>
<li>
<h2>Mechanical</h2>
</li
><li>
<h2>Electrical</h2>
</li
><li>
<h2>Programming</h2>
</li
><li>
<h2>Non-Tech</h2>
</li
><li>
<h2>Spirit</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Members</h1>
</li
><li>
<h1>Mentors</h1>
</li
><li>
<h1>Sponsors</h1>
</li>
</ul>
</li
><li id="projects">
<ul>
<li>
<h1>Robots</h1>
<ol>
<li>
<h2>2011- Geoffery</h2>
</li
><li>
<h2>2010- Ahab</h2>
</li
><li>
<h2>2009- Redemption</h2>
</li
><li>
<h2>More Robots...</h2>
</li>
</ol>
</li
><li>
<h1>Competition</h1>
<ul>
<li>
<h2>Schedule</h2>
</li
><li>
<h2>The Game</h2>
</li
><li>
<h2>The Rules</h2>
</li
><li>
<h2>Scouting</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Outreach</h2>
<ul>
<li>
<h2>FLL Competition</h2>
</li
><li>
<h2>Mentoring</h2>
</li
><li>
<h2>Service</h2>
</li>
</ul>
</li>
</ul>
</li
><li id="media">
<ul>
<li>
<h1>Blog</h1>
</li
><li>
<h1>Photos</h1>
</li
><li>
<h1>Videos</h1>
</li
><li>
<h1>In the News</h1>
</li>
</ul>
</li
><li id="resources">
<ul>
<li>
<h1>Documents</h1>
</li
><li>
<h1>Robot Manual</h1>
</li
><li>
<h1>Calendar</h1>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
我的css：
body {
background-color:#ffffff;
}
div.header {
padding-left:150px;
padding-right:0px;
background-color:#003d00;
margin:0px;
height:160px;
}
div.header .headerElement {
float:left;
position:relative;
}
div.header img.team422Logo {
height:150px;
width:150px;
right:150px;
top:5px;
}
ul.mainNavBar {
padding:0px;
margin:0px;
margin-left:-150px;
border-top:2px solid #003d00;
width:100%;
clear:right;
}
ul.mainNavBar li {
min-width:140px;
height:75px;
width:16.7%;
padding:0px;
margin-right:-2px;
display:inline-block;
position:relative;
}
ul.navBarMain li:hover {
background-image:url('./mainNavBarBackgroundSelected.png');
background-color:#006600;
}
ul.mainNavBar li:first-child {
width:16.5%;
margin-left:1px;
}
ul.mainNavBar li div {
position:absolute;
top:0px;
border-left:2px solid #003d00;
border-right:2px solid #003d00;
margin:0px;
padding-left:5px;
margin-right:-2px;
height:100%;
width:100%;
background-image:url('./mainNavBarBackground.png');
}
ul.mainNavBar li div:hover {
color:#ffffff;
background-image:url('./mainNavBarBackgroundSelected.png');
}
ul.mainNavBar li:first-child div {
border:none;
}
ul.mainNavBar li div h1 {
font-size:22px;
margin-top:4px;
}
ul.mainNavBar li div h2 {
font-size:14px;
}
ul.dropDownNav {
margin:0px;
padding:0px;
width:100%;
}
ul.dropDownNav li {
margin:0px;
padding:0px;
list-style-type:none;
}
ul.dropDownNav li ul {
width:100%;
margin:0px;
padding:0px;
}
ul.dropDownNav li ul li {
display:inline-block;
vertical-align:top;
}
#about li {
width:25%;
}
#team li {
padding:0px;
margin:0px;
width:20%;
}
#projects li ul {
width:33.3%;
padding:0px;
margin:0px
}
#projects li {
padding:0px;
margin:0px;
width:33.3%;
}
#projects li:first-child {
width:33.4%;
}
#media li {
width:25%;
}
#resources li {
width:33.3%;
}
#resources li:first-child {
width:33.4%;
}
ul.dropDownNav li ul li h1 {
font-size:20px;
}
ul.dropDownNav li ul li ol,
ul.dropDownNav li ul li ul {
width:100% !important;
padding:0px;
margin:0px;
}
ul.dropDownNav li ul li ul li,
ul.dropDownNav li ul li ol li {
position:relative;
display:block;
text-indent:5px;
text-align:left;
width:100% !important;
}
ul.dropDownNav li ul li ul li h2,
ul.dropDownNav li ul li ol li h2 {
font-size:16px;
}
提前致谢！
答案 0 :(得分：0)
这条规则：
#projects li ul {
width:33.3%;
padding:0px;
margin:0px
}
有一个ID选择器#projects。这使得它成为一个更具体的选择器，导致其宽度超过ul.dropDownNav li ul li ul宽度，除非您添加!important。
您可以轻松解决此问题并取消!important，只使用child combinator >强制ul儿童的后续级别33.3%宽度为#projects > li > ul {
width:33.3%;
padding:0px;
margin:0px
}
/ p>
{{1}}