一行显示3个<li>的CSS怎么写？

1、利用Dreamweaver新建一个html页面。

2、在body里面输入代码

<ul>

<li>你好</li>

<li>小鱼</li>

<li>小小</li>

</ul>。

3、默认的样式是这样的。

4、编辑li标签的css样式。

5、float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。

xhtml代码首先定义了一个容器div id="nav"。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul id="nav"就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，假如我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。#nav定义了窗口的宽高及背景颜色。#nav ul包含有margin和padding声明，字体及颜色声明。line-height: 30px是非常重要的定义，假如取消掉行高的定义，我们的链接文字垂直居中就可能受到影响。white-space: nowrap或许大家并不能理解有什么作用，它定义了强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 #nav li中的list-style-type: none去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display: inline声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的要害。#nav li a和#nav li a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding: 7px 10px它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。

---