0

UL（順不同リスト）を使用してナビゲーションメニューを構成しているときに、ページをズームインおよびズームアウトすると、リストアイテムが右にシフトして、行から外れることに気付きました。どうすれば彼らをいつも同じ場所にとどまらせることができますか？

私はそれで遊ぶためにJSFiddleで以下を追加しました。

<div id="navigation">
                     <ul>
                            <font face="Verdana, Geneva, sans-serif">
                            <li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
                            <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                            <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                            <li><a> KİTABLAR </a></li>
                            <li> <a> VİDEOLAR </a> </li>
                            <li> <a id="last-item">FOTOLAR</a> </li>
                            </font>
                     </ul>
#navigation {
    width: 900px;
    margin: 0 auto 0px;
}

div#navigation ul li {
    font-size:9px;
    list-style:none;
    background-color:transparent;
    background-color:#FFF;
    float: left;
}
div#navigation ul li:hover {
    background-color:#9C1A35;
}
div#navigation ul li a {
    color:#333333;
    text-decoration:none;
    display: block;
    padding:10px 43px 20px;
}
#navigation ul li a:hover {
    color:#fff;
}
ul {
    padding:0;
}
#active-li {
    background:#9C1A35 !important;
}
#active-li a {
    color:#fff !important;
}
#last-item {
    padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
    background:#9C1A35 !important;
}
div#navigation ul li #active a {
    color:#fff;
}
4

3 に答える 3

1

過度にズームすると、ほとんどのページのレイアウトが失われます。これは、ブラウザで「テキストのみをズーム」オプションが有効になっている場合に発生します。これが私の提案です：

  • アイテムの値を低くpadding-rightします（43pxはメニューには多すぎます）。padding-left<a>
  • 、、をアイテムに付けて、を設定してheightみmin-heightてください。このように、テキストはコンテナボックスに残り、不足することはありません。max-heightoverflow:hidden
  • 要素のサイズを設定するには、pxの代わりに相対値（percent、em）を使用します。
于 2012-07-28T06:45:33.890 に答える
0

#navigation { width: 900px; margin: 0 auto 0px; display: inline; }

于 2012-07-28T03:57:10.053 に答える
0

ナビゲーションバーを所定の位置に維持するための新しい方法を考え出しました 

<div id="navigation">
                         <ul>
                                <font face="Verdana, Geneva, sans-serif">
                                <li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li>
                                <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                                <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                                <li><a href="../Books/booksAZ.html"> KİTABLAR </a></li>
                                <li> <a> VİDEOLAR </a> </li>
                                <li> <a id="last-item">FOTOLAR</a> </li>
                                </font>
                         </ul>
                  </div>

    #navigation {
        width: 900px;
        margin: 0 auto 0px;
    }
    div#navigation ul li {
        font-size:9px;
        list-style:none;
        background-color:transparent;
        background-color:#FFF;
        float: left;
        width:150px;
        height:40px;
        text-align:center;
    }
    div#navigation ul li:hover {
        background-color:#9C1A35;
    }
    div#navigation ul li a {
        color:#333333;
        text-decoration:none;
        display: block;
        padding:6px 0px 18px;
        border-left:1px thin black;
        border-right:1px thin black;
    }
    #navigation ul li a:hover {
        color:#fff;
    }
    ul {
        padding:0;
    }
    #active-li {
        background:#9C1A35 !important;
    }
    #active-li a {
        color:#fff !important;
    }
    div#navigation ul li #active {
        background:#9C1A35 !important;
    }
    div#navigation ul li #active a {
        color:#fff;
    }
于 2012-08-07T21:59:06.967 に答える