首頁>Program>source

因此,我尝試建立一个水平列表以在我正在設計的新網站上使用.我已经尝試了一些已经在網上找到的建議,例如將" float"設置為左等,但是在解決問题時,這些建議都没有奏效。

   ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }
<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

当前我不確定匯致此問题的原因,我该如何解決该問题?

最新回復
  • 5月前
    1 #

    更新後的答案

    我註意到很多人都在使用此答案,因此我決定對其进行一些更新.如果您想查看原始答案,請檢查以下內容.新答案演示了如何在列表中添加一些樣式。

    ul > li {
        display: inline-block;
        /* You can also add some margins here to make it look prettier */
        zoom:1;
        *display:inline;
        /* this fix is needed for IE7- */
    }
    
    <ul>
        <li> <a href="#">some item</a>
        </li>
        <li> <a href="#">another item</a>
        </li>
    </ul>
    

  • 5月前
    2 #

    這个小提琴顯示了如何

    http://jsfiddle.net/9th7X/

    ul, li {
        display:inline
    }
    

    有關列表和CSS的出色參考文献:

    http://alistapart.com/article/taminglists/

  • 5月前
    3 #

    更好的方法是使用 inline-block ,因為您不需要使用 clear:both 在列表的末尾。

    尝試一下:

    <ul>
        <li>
            <a href="#">some item</a>
        </li>
        <li>
            <a href="#">another item</a>
        </li>
    </ul>
    

    CSS:

    ul > li{
        display:inline-block;
    }
    

    在這裏查看:http://jsfiddle.net/shahverdy/4N6Ap/

  • 5月前
    4 #

    您還可以使用內聯塊来避免浮動元素

    <ul>
        <li>
            <a href="#">some item</a>
        </li>
        <li>
            <a href="#">another item</a>
       </li>
    </ul>
    

    ,然後設置為:

    li{
        /* with fix for IE */
        display:inline;
        display:inline-block;
        zoom:1;
        /*
        additional styles to make it look nice
        */
     }
    

    這樣,您將不需要浮動任何內容,無需使用clearfix。

  • 5月前
    5 #

    在這裏您可以找到一个有效的示例,其中包含有關動態調整列表大小的更多建議。

    我使用display:inline-block和百分比填充,以便父列表可以動態更改大小:

    display:inline-block;
    padding:10px 1%;
    width: 30%
    

    再加上两條規則,以删除第一項和最後一項的填充。

    ul#menuItems li:first-child{padding-left:0;}
    ul#menuItems li:last-child{padding-right:0;}
    

  • python:pandas"只能比较標記相同的DataFrame物件"錯誤
  • php:三元運算符和字元串串聯怪癖?