2

我有这个代码：

<header>
    <div id="title">
        <h1><img alt="logo" src="/Content/logo.gif" />&nbsp;&nbsp;&nbsp;&nbsp;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;
}

生成这个：

html问题

如您所见，有两个问题，右侧的小滚动条和导航与顶部对齐而不是底部对齐。我尝试了垂直对齐属性，但没有帮助。左边的图片有一个溢出：自动属性。

编辑：我已经删除了浮动：左；和文本对齐：左；它修复了，但现在它们是一个在另一个之下......

谢谢。

4

1 回答 1

4

从header, #header规则中删除overflow:auto<-它使滚动条可见。

第二件事是&nbsp;（请！）用一些padding规则替换；）

于 2012-06-15T13:26:50.557 回答