1

ナビゲーションメニューを他のすべての下に中央揃えするのに問題があります。また、区切り線が2つのメニュー項目の中央に配置されていません。

CSS

    .center{
    width: 450px;
    height: 500px;
    /*margin: 0 auto;
    display: block;
    position:relative;*/
    position:absolute;
    left:50%;
    top:50%;
margin-left:-225px;
margin-top:-250px;}



#navbar {

    padding:0;
    margin-left: 0 auto;
    margin-right: 0 auto;}

#navbar li {
    float: left;
    list-style:none;
    width: 100px;}

#navbar a{
    text-decoration:none;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    padding: 0;}

#navbar li + li {
    background: url('separator.gif') no-repeat top left;
}

これがhttp://jsfiddle.net/elroyz/GPgPF/です

4

2 に答える 2

1

navbar liあなたのメイクをフローティングする代わりにdisplay:inline-block：

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}

http://jsfiddle.net/GPgPF/3/

于 2013-03-13T11:10:33.120 に答える
1

css を次のように変更します。

#navbar {
    width: 100%;
    padding:0;
}

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}
于 2013-03-13T11:13:48.230 に答える