我有这段代码:
<header>
<div id="title">
<h1><img alt="logo" src="/Content/logo.gif" /> Choose your product</h1>
</div>
<nav>
<ul id="menu">
<li>Products</li>
<li>Auctions</li>
<li>Segmentation</li>
</ul>
</nav>
</header>
这就是css:
body {
/*background-color: #5c87b2;*/
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
header,
footer,
nav,
section {
display: block;
}
p, ul {
margin-bottom: 20px;
line-height: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.5em;
color: #000;
}
h1 {
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
header, #header {
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
overflow:auto;
}
header h1, #header h1 {
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #999;
border: none;
line-height: 1em;
font-size: 48px !important;
text-shadow: 1px 1px 2px #111;
}
ul#menu {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a {
background-color: #fff;
color: #000;
}
nav,
#menucontainer {
margin-top: 40px;
}
div#title {
display: block;
float: left;
text-align: left;
}
产生这个:
正如您所看到的那样,有两个问题,右侧的小滚动以及导航器与顶部而不是底部对齐。我尝试了vertical-align属性,但它没有帮助。左边的图片有一个overflow:auto属性。
编辑:我删除了浮动:左;和text-align:left;并且它已经固定但是现在它们是另一个......
感谢。
答案 0 :(得分:4)
从header, #header
规则移除overflow:auto
&lt; -it可以看到滚动条。
第二件事是
(请!)替换为某些padding
规则;)