br在ul中无效 [英] br not valid in ul
问题描述
我的网站上有一个导航栏.
I have a navigation bar on my website.
HTML:
<nav id="navigation">
<a href="index.html"> <h1>My Cooking Webpage</h1> </a>
<ul>
<li>
<a href="nav/recipes.html" class="right_categories">Recipes</a>
</li>
<li>
<a href="nav/categories.html" class="right_categories">Categories</a>
<ul id="subcategories">
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</li>
<li>
<a href="nav/about.html" class="right_categories">About Us</a>
</li>
</ul>
</nav>
CSS:
#navigation {
font-size: 24px;
float: right;
}
#featured-image {
width: 800px;
height: 600px;
}
.breadcrumb {
font-size: 20px;
}
#subcategories {
display: none;
}
nav {
display: block;
position: relative;
}
nav li {
display: block;
margin-right: 10px;
float: right;
}
nav li:hover #subcategories {
display: block;
}
nav a {
color: white;
}
nav ul {
padding: 0px;
list-style-type: none;
}
#featuredtext {
position: relative;
}
#page-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
position: relative;
z-index: 1;
padding: 10px;
}
#slider_wrapper {
width: 100%;
text-align: center;
}
#navigation {
width: 100%;
}
如果有帮助,我的 DOCTYPE
是HTML5(<!DOCTYPE html>
).
My DOCTYPE
is HTML5 (<!DOCTYPE html>
) if that helps.
问题是,当我将鼠标悬停在类别"链接上时,下拉框会水平而不是垂直放置.当我将< br/>
s放在< li>
s之间时,HTML无法验证.
The problem is that when I hover over the "Categories" link, the drop-down box drops horizontally rather than vertically. When I put <br />
s in between the <li>
s, the HTML doesn't validate.
我认为这是由于CSS中的 float:right;
引起的,尽管我尝试使用 float:none;
进行纠正.
I think it is because of the float: right;
in the CSS, though I tried to correct it with float: none;
.
是否有一种方法可以使其垂直而不是水平地下降,或者是否可以替代< br/>
.我希望HTML通过W3C验证器, HTML 和
Is there a way to make it drop down vertically rather than horizontally, or is there an alternative to <br />
. I want the HTML to validate through the W3C validators, HTML and CSS.
推荐答案
< ul>
的唯一有效子元素是< li>
.使用CSS设置< li>
的顶部和底部边距的样式,以填充其垂直距离.完全删除 float
样式,使它们显示为垂直排列的块元素.
The only valid child element of a <ul>
is a <li>
. Style the <li>
's top and bottom margins using CSS to pad their vertical distance. Remove the float
style altogether to have them appear as block elements lined up vertically.
这篇关于br在ul中无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!