3

私のCSSULメニューは中心に置きたくないようです、何かアイデアはありますか？私はあなたのレビューのために以下のコードを貼り付けました、私はCSSにかなり慣れていないのであなたの助けは大歓迎です:-)

中央に配置できる唯一の方法は、幅を固定してhtmlの中央タグを使用することですが、拡張するにはメニューを100％にする必要があり、自動的に中央に配置する必要があります。

CSS

#menu{
    width:100%;
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left;
    padding: 0 0 5px 0;
    position: relative;
    list-style:none;
    margin:auto;
}

#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}

#menu a{
    float: left;
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

再度、感謝します ：-）

4

2 に答える 2

5

あなたに幅を提供しmenu、使用するmargin: auto;

#menu{
    width:300px; <--------Here
    margin: 0 auto; <-----Here
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

さらに、なぜあなたはこれをしているのですか？

#menu li:hover > ul{
    display: block;
}

そしてこれも

#menu a{
    float: left;
    ....
}

更新：カスケードがかなり混乱しているように見えるすべてのスタイルを読んでください。次を使用してください

#menu { /* I Assume this ID is applied to <ul> element */
    width:/*Whatever you want to define*/;
    margin: 0 auto; <---Change Here
    padding: 5px 0 0 0;
    list-style-type: none;  <---Change Here
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left; <---You don't need this
    padding: 0 0 5px 0;
    position: relative; <---You don't need this too
    list-style:none; <---You don't need this too
    margin:auto; <---You don't need this too
}

/* Take out this entirely from here */
#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}
/* till here */

#menu a{
    float: left; <---You don't need this
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

メニュー内のリンクも中央に配置したい場合は、これを使用してください

HTML

<ul id="#menu">
  <li></li>
</ul>

CSS

#menu li {
  text-align: center;
}
于 2012-10-29T19:52:17.633 に答える
0

パッティング

text-align:center;

ul内は、ul内のテキストが中央に配置されることを意味します。追加する必要があります：

margin-left:auto;
margin-right:auto;

ulに。これは、IEを除くすべての主要なブラウザで機能します。IEで作業するには、ulを含むタグにulが含まれていることを確認する必要があります

text-align:center;

初期化。

于 2012-10-29T19:54:02.480 に答える