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問題

ご覧のとおり、2つの問題があります。右側の小さなスクロールと、ナビゲーションが下部ではなく上部に位置合わせされていることです。vertical-align属性を試しましたが、役に立ちませんでした。左の画像にはoverflow：auto属性があります。

編集：私はフロートを削除しました：左; およびtext-align：左; そしてそれは修正されましたが、今ではそれらは上下に並んでいます...

ありがとう。

4

1 に答える 1

4

header, #headerルールから削除overflow:auto<-スクロールバーを表示します。

2つ目は、 （お願いします！）いくつかのルール&nbsp;に置き換えることです;）padding

于 2012-06-15T13:26:50.557 に答える