0

私が作っているウェブサイトでは、ULを設定しています。すべてのリスト項目のそれぞれにテキストがありますが、ページをズームインおよびズームアウトすると、テキストがボックスから出てきます。リスト項目にテキストを保持する方法はありますか?

HTML 

<div id="navigation">
                  <ul>
          <font face="Verdana, Geneva, sans-serif">
          <li> <a href="../index.html"> ƏSAS SƏHİFƏ  </a> </li>
          <li id="active-li"> <a href="#"> BIOQRAFIYA </a> </li>
          <li> <a href="../News&Events/N&SAz.html"> 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 href="../Picutres/picutresAZ.html" id="last-item"> FOTOLAR </a> </li>
          </font>
        </ul>
            </div>
    </div>

CSS

#navigation {
        width: 900px;
        margin: 0 auto 0px;
    }
    div#navigation ul li {
        font-size:.5em;
        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;
    }
    #navigation ul li a:hover {
        color:#fff;
    }
    ul {
        padding:0;
    }
    #active-li {
        background:#9C1A35 !important;
    }
    #active-li a {
        color:#fff !important;
    }
    #last-item {
     !important;
    }
    div#navigation ul li #active {
        background:#9C1A35 !important;
    }
    div#navigation ul li #active a {
        color:#fff;
    }
4

1 に答える 1

0

リストをスタイリングする際に知っておくべき最も重要なこと: リストをスタイリングしないでください! コンテンツをスタイリングします。

リストをリセットします。使用する：

ul, li {margin:0;padding:0}

それから：

を使用して、すべてのスタイルをリスト内のアンカーに配置しdisplay:blockます。などのポジショニングを に使用できますfloat:leftがLI、それ以外はすべてタグに配置してAください。

于 2012-08-10T17:20:44.177 に答える