Question

我有这段代码：

<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;
}

产生这个：

htmlproblem

正如您所看到的那样，有两个问题，右侧的小滚动以及导航器与顶部而不是底部对齐。我尝试了vertical-align属性，但它没有帮助。左边的图片有一个overflow：auto属性。

编辑：我删除了浮动：左;和text-align：left;并且它已经固定但是现在它们是另一个......

感谢。

Answer 1

从header, #header规则移除overflow:auto＆lt; -it可以看到滚动条。

第二件事是 （请！）替换为某些padding规则;）

CSS在html5中错位导航

1 个答案: