[分享]css中如何将无序列表水平排列

CSS中如何将无序列表水平排列 在CSS中，要将无序列表水平排列，需要使用display属性和liststyle属性。首先，在CSS样式中，我们需要声明无序列表的display属性为inlineblo...

CSS中如何将无序列表水平排列 在CSS中，要将无序列表水平排列，需要使用display属性和list-style属性。首先，在CSS样式中，我们需要声明无序列表的display属性为inline-block或者inline，这样可以使列表项横向排列。同时，我们还需要将每个列表项的list-style属性设置为none，否则会出现默认的圆点或方块。 下面是样式代码： pre { background-color:#ddd; padding:10px; } p { font-size:16px; font-family:'Microsoft Yahei'; line-height:2; margin-bottom:20px; } ul.horizontal { display:inline-block; list-style:none; margin:0; padding:0; } ul.horizontal li { display:inline-block; margin:0; padding:0; } ul.horizontal li a { display:block; padding:10px; text-decoration:none; color:#333; border:1px solid #ccc; border-radius:5px; } 在这段代码中，我们首先定义了pre标签和p标签的样式，然后定义了一个样式为ul.horizontal的无序列表，display属性为inline-block，list-style属性为none，同时设置了margin和padding为0。在ul.horizontal li样式中，我们将每个列表项都设置为display:inline-block，同时也将margin和padding设置为0，这样可以保证列表项间没有空白。最后，我们将ul.horizontal li a样式中的display属性设为block，并设置padding、border、border-radius和text-decoration等属性，使得每个列表项看起来像一个按钮。 在HTML中，我们则可以使用ul和li标签来创建无序列表，使用a标签来为每个列表项添加超链接。下面是HTML的代码：

以下是条目列表：

• 第一项
• 第二项
• 第三项
• 第四项
• 第五项