我一直试图制作一个只显示文学杂志指南的基本页面。
我一直在使用ul
和li
让它看起来井然有序,但有些不对劲。我也在我的CSS中重置了css,但我认为没有必要把它放在预览中。
我认为问题可能出现在下拉菜单的某些部分,但我不确定在哪里查看。此外,我确实尝试了ul
和li
类,因此它只会加载该特定部分,但它不起作用。我删除了下拉菜单,ul确实有效。
编辑:列表不会像现在应用css那样垂直显示。它做了什么它就像是一个段落标记一样显示它,但在每个句子的开头是一个子弹。它们也应该是ul和h2之间的视觉断线。
css:
#content-container{
width: 960px;
height:1000px;
background-color: red;
margin:auto;
}
#navbar {
width: 100%;
height: 30px;
/*background-color: pink;*/
text-align:center;
display:inline-table;
}
#navbar ul ul {
display: none;
}
#navbar ul li:hover > ul {
display: block;
}
#navbar ul {
background: #efefef;
/*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */
/*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
/*padding: 0 20px;*/
/*border-radius: 10px;*/
list-style: none;
position: relative;
display: inline-table;
}
#navbar ul:after {
content: ""; clear: both; display: block;
}
li {
float: left;
}
#navbar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li:hover a {
color: #fff;
}
#navbar ul li a {
display: block; padding: 10px 50px;
color: #757575; text-decoration: none;
}
#navbar ul ul {
background: #5f6975; border-radius: 0; padding: 0;
position: absolute; top: 100%;
}
#navbar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#navbar ul ul li a {
padding: 5px 20px;
color: #fff;
}
#navbar ul ul li a:hover {
background: #4b545f;
}
#navbar ul ul ul {
position: absolute; left: 100%; top:0;
}
*#content{
width:960px;
height:500px;
margin:auto;
background-color:purple;
}
#content h1{
font-family: 'Droid Serif', 'serif';
font-weight: 700;
}
#content h2{
font-family: 'Droid Serif', 'serif', 'italic';
font-weight: 700;
}
#content ul{
list-style-type:circle;
font-family: 'Droid Serif', 'serif';
padding: 0;
margin: 0;
}
#content li{
font-family: 'Droid Serif', 'serif';
padding-left:10px;
float:left;
}
html:
<div id= "navbar">
<ul>
<li><a href="#">Today's Content</a></li>
<li><a href="#">Genre</a>
<ul>
<li><a href="#">Fiction</a></li>
<li><a href="#">Non-Fiction</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Drama</a></li>
<li><a href="#">Romance</a></li>
</ul>
</li>
<li><a href="#">Rubric</a></li>
<li><a href="#">Content</a>
<ul>
<li><a href="#">Jan</a></li>
<li><a href="#">Feb</a></li>
<li><a href="#">Mar</a></li>
<li><a href="#">Apr</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">Sept</a></li>
<li><a href="#">Oct</a></li>
<li><a href="#">Nov</a></li>
<li><a href="#">Dec</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Submit</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h1>
Submission deadline: Friday, May 9th
</h1>
<h2>
Poetry Submissions
</h2>
<ul>
<li>Needs a title</li>
<li>Cannot be about specific other students</li>
<li>Must have a way to contact if any questions </li>
<li>Can’t be disrespectful or rude</li>
</ul>
<h2>
Fiction Submissions
</h2>
<ul>
<li>5 submissions, 10page cap total</li>
<li>Spelling and grammar checked</li>
<li>Must be typed</li>
<li>Showing vs. telling - wanted</li>
<li>Staple work & corresponding artwork or label art w/ title of work</li>
<li>Must be fiction (has to fit genre)</li>
</ul>
</div>
</div>
答案 0 :(得分:0)
&#34;列表没有像现在应用css那样垂直显示。&#34;
要使其垂直显示,您必须清除之前已应用于li
的浮动。在#content li
个样式中,将其从float:left
更改为:
float:none;
&#34;它们应该是ul和h2之间的视觉断行。&#34;
如果您进行上一次更改,则根据我的小提琴已经有换行符: