我想创建菜单栏及其内容如下,但内容出现在另一个下面:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div class="menuheader"> Facebook, Twitter, Youtube </div>
<div class="menu">
<ul> Home </ul>
<ul> About Us
<li> Establishment </li>
</ul>
<ul> Careers
<li> Current Openings </li>
<li> Working with us </li>
<li> Work Culture </li>
</ul>
<ul> Contact Us </ul>
</div>
CSS:
.menu{
background-color:#999999;
color:#FFFFFF;
width:940px;
height:50px;
margin:20px;
padding:20px;
font-size:12px;
float:left;
}
答案 0 :(得分:1)
浮动:左边正在工作,但是你的右边20px的填充导致了问题。我为你做了一个小提琴,http://jsfiddle.net/tsJ7r/1/ 变化:
padding:20px;
为:
padding:0px;
它应该有效 如果你想在除左边之外的所有边都有填充,你可以使用
padding-top:20px;
padding-bottom:20px;
答案 1 :(得分:1)
您的无序列表标记不正确。尝试这样的事情:
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Careers
<ul>
<li>Current Openings</li>
<li>Working With Us</li>
<li>Working Culture</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
然后你的CSS看起来像这样:
ul.menu {
float: left;
}
ul.menu li {
float: left;
padding: 20px;
// etc.
}