首頁>Program>source

html:水平清單專案

因此，我尝試建立一个水平列表以在我正在設計的新網站上使用.我已经尝試了一些已经在網上找到的建議，例如將" 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>

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

61

html

css

最新回復
  • 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:三元運算符和字元串串聯怪癖？