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-tag 上。

于 2012-08-10T17:20:44.177 回答