0

一見中央に配置しようとしているように見えますが、実際には数ピクセルずれています。本当に迷惑です。

写真： http： //i.imgur.com/X4jhf.png

私のコード：

HTML： 

<body>
        <div class="menu-bar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>   
        </div>

        <div class="greeting"></div>
    </body>

CSS：

.menu-bar {
    font-family: 'Lucida Grande';
}

.menu-bar ul {
    text-align: center;
    list-style-type: none;
}

.menu-bar li {
    display: inline;
}

.greeting {
    background: url('../media/pic.jpg');
    border: 1px solid black;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 375px;
}

とてもイライラします。> _ <

4

2 に答える 2

3

Marginまた、ブラウザの不整合を回避するためにcssリセットを使用している場合を除き、Padding両方をに設定する必要があります。0

.menu-bar ul {
    text-align: center;
    list-style-type: none;
    margin:0;
    padding:0;
}

デモ。

于 2012-08-26T22:16:36.960 に答える
1

ULには、まだ処理していないデフォルトの左マージンがあります。マージンを追加するだけです：0;

于 2012-08-26T22:07:08.250 に答える