0

http://jsfiddle.net/hmaQR/

これが私のhtmlです：

<div id="page">
    <div id="logo">
        <h1>My Website</h1>
    </div>
    <div id="navigation-wrapper">
        <ul id="top-navigation">
            <li class="home">Home</li>
            <li class="about">About</li>
            <li class="Blog">Blog</li>
            <li class="Contact">Contact</li>
        </ul>
    </div>
    <div id="body"></div>
</div>

そしてCSS

#page {
    margin: 0 auto;
    border: 2px solid black;
    width: 960px;
    height: 700px;
}
h1 {
    font-family: Helvetica;
    text-decoration:;
    color: #0099CC
}
#logo {
    position: relative;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    border: 1px dashed blue;
}
#navigation-wrapper {
    margin: 0 auto;
    border: 1px dashed blue;
    text-align: center;
}
#top-navigation {
    border: 1px solid black;
    margin: 0 auto;
    list-style: none;
}
#top-navigation li {
    width: 80px;
    height: 20px;
    background-color: orange;
    padding: 5px;
    color: blue;
    font-family: Helvetica;
    display: inline-block;
}

オレンジ色のナビゲーション バー/リストが、その上のロゴの中央に配置されていないことに気付くでしょう。私は一体何が欠けているのですか？#top-navigation をページの中央に配置できないようです。私はcssに非常に慣れていないので、助けていただければ幸いです。

4

2 に答える 2

1

作成するページの各 css ファイルで、常に次を最初に配置して、デフォルトの css のすべてのマージンとパディングを無効にすることをお勧めします。

* { margin:0;padding:0}

それを試してみると、h1のマージンとパディングを調整できます

お役に立てれば

于 2013-06-29T00:27:34.340 に答える
1

私はあなたのフィドルをフォークしました：http://jsfiddle.net/hmaQR/1/

ul { padding-left: 0; }

優れた開発ツールバーを入手することを強くお勧めします。Chrome にはすぐに使用できる優れた機能があります。

于 2013-06-29T00:46:04.943 に答える