首页>Program>2021-01-11 07:56source

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>

当前我不确定导致此问题的原因，我该如何解决该问题？

html

css

最新回答

2021-1-11

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>

2021-1-11
2 #
这个小提琴显示了如何

http://jsfiddle.net/9th7X/
```
ul, li {
    display:inline
}
```
有关列表和CSS的出色参考文献：

http://alistapart.com/article/taminglists/
2021-1-11
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/

2021-1-11

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。

2021-1-11
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;}
```

Codebug

html:水平清单项目

html

css

相关问题