Question

在我正在制作的网站上，我有一个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;
    }

Answer 1

了解样式列表时最重要的事情是：请勿为列表设置样式！设置内容样式。

重置列表。使用：

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

然后：

使用display:block将所有样式放在列表中的锚点上。您可以在float:left上使用LI等定位，但在A - 标记上放置其他所有内容。

使文本保留在列表项中

1 个答案: