html - メニューを中央に配置するにはどうすればよいですか？CSS

Question

メニューを中央に配置するにはどうすればよいですか？また、マウスがメニューボタンに来たときに色を変更したいですか？助けてくれてありがとう。

 div.menu {
    list-style:none;
    margin:20px;
    padding:0;
    width:100% }
 div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:0 auto;
    padding:0;}
    div.menu li{
    display:inline; }
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }

 div.menu lia:hover{
    background:#a2b3a1;
    color:#000 }

私は元気に働いていましたが、何かを変えて、それはもう中心にありません。少し左側。何が悪いのかわかりません。手伝ってもらえますか？

 div.menu {
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;} 
div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:20px;
    padding:0;
    display:inline-block;}
 div.menu li{
    display:inline;}
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }
 div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

score 1 · Accepted Answer

このサンプル fiddleのように。

メニューをtext-align:centerdiv とリストの中央に配置display:inline-blockし、20px の余白を div からリストに移動します。
ホバー時に色を変更するには: との間にスペースを追加しliますa。

score 1 · Accepted Answer

これらの記事をご覧ください。必要なものはすべて揃っています。

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

また

http://matthewjamestaylor.com/blog/centered-dropdown-menus

score 0 · Accepted Answer

divを中央に配置するには、絶対位置と相対位置を操作するか、幅をpx、em、またはinchで指定し、その後、別のdivを使用して％を使用する必要があります。もっと具体的にできますか？

score 0 · Accepted Answer

自動マージンでメニューをフロートします。

onmouseover イベントを使用して、ボタンの色を変更します。

score 0 · Accepted Answer

私は 1 年ほど前にまとめた CSS をいくつか持っており、私が取り組んでいるほぼすべてのプロジェクトで使用しています...自由に使用してください。それを使用するには、リストを次のようにスタイルするだけです。

<ul id="mylist" class="linearlist center"><li>Link or something</li></ul>

これにより、フロートを使用せずに、コンテナが折りたたまれる問題に対処することなく、メニューを非常に簡単に中央揃えにすることができます。スタイリングクラスにはいくつかのオプションがあります - 中央、左、右、セパレーター、インナー、アウター。遊んでください。（a）クラス「linearlist」を指定し、HTMLに空白がないことを確認してください。一部のブラウザーはこれをレンダリングします。

/*************************************
FLAT LIST LAYOUT

    This can be called into use using the following classes:

            required        : linearlist
            select either   : centre / left / right
            optional        : separators
            outers / inners : adds or removes outermost borders

    Example usage:

            eg 1:  <ul class="linearlist right separators">
            eg 2:  <ul class="linearlist centre separators">
            eg 3:  <ul class="linearlist left">

    Support:
            IE6 :   :first-child and :last-child pseudoclasses are not supported
                    .inners and .outers will not work
            IE7 :   :last-child pseudoclass is not supported
                    .outers will not work but .inners will
            Note browser-sniffing is required to make list items full height in IE6 and IE7

    Remember - you will need to remove whitespace between list items for true rendering.

*************************************/
ul.linearlist, .linearlist ul          {list-style-type: none; padding: 0; margin: 0;}
ul.linearlist li,.linearlist ul li     {display: inline-block; padding: 0; margin: 0;}
*ul.linearlist li,*.linearlist ul li   {display: inline !important;}
ul.linearlist li a,.linearlist ul li a {display: inline-block;}

ul.separators li,.separators ul li                         {border-left-width: 1px; border-left-style: solid;}
ul.inners li:first-child,.inners ul li:first-child {border-left-width: 0;} /* removes border from left-most list item  */
ul.outers,.outers ul {border-right-width: 1px; border-right-style: solid;} /* adds border to right-most list item  */

ul.centre,ul.center,.centre ul,.center ul {text-align: center;}
ul.left,.left ul                          {text-align: left;}
ul.right,.right ul                        {text-align: right;}

そうそう、CSS にちょっとしたタイプミスがあり、マウスオーバー時の色の変化を妨げています...最後の宣言は次のようになります。

div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

ただし、非常に多くのセレクターをネストするのは悪い習慣であるため、少し合理化できます...代わりにこれを試してください：

.menu a:hover{
    background:#a2b3a1;
    color:#000 }

score 0 · Accepted Answer

このJSフィドルをチェックしてください

http://jsfiddle.net/7zk8E/

text-align:center を外側の div に適用して、メニューを中央に配置します (そのクラスメニューを呼び出しました)。.menu ulまた、インライン要素にはパディングやマージンがないため、表示プロパティをインラインブロックに変更しました。

ホバーが機能しなかった理由は、CSS にタイプミスがあるためですdiv.menu lia:hover

そのはずdiv.menu li a:hover

score 0 · Accepted Answer

3 つのリンク (幅 33.3%) でこれを試してください:例

.menu {
    list-style:none;
    margin:0 auto;
    padding:0;
    width:100%;
}

.menu ul {
    font-family:Verdana;
    font-size:14px;
    padding:0;
    width:100%;
}

.menu li {
    float:left;
    width:33.3%; 
}

.menu a {
    text-decoration:none;
    background:#FBB117;
    color:#4C4646;
    float:left;
    width:100%;
    height:100%;
    text-align:center;
    border-left:1px solid #fff; 
}

.menu a:hover {
    background:#a2b3a1;
    color:#000; 
}

これらのスタイルの前に「div」セレクターを使用する必要はないので、それらを削除しました。
div.menu lia :hover にタイプミスがありました。li a :hover {}にするべきでした

html - メニューを中央に配置するにはどうすればよいですか？CSS

7 に答える 7

Related

Reference