cssli样式模板,css样式模板网站

一行显示3个的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标签前面的小圆点。

DIV+CSS样式，li自动适应高度，自动换行，横向排列

HTML部分：

div id="nav"

ul

liAAAA/li

liBBBB/li

liCCCC/li

liDDDD/li

liEEEE/li

liFFFF/li

/ul

/div

css部分：

#nav{

margin: 0 auto;

border: 2px solid #00CED1;

}

ul,li {

margin: 0px;

padding: 0px;

list-style: none;

}

ul{

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

li{

border: 1px solid;

width: 100px; /*每个元素的初始化宽度*/

text-align: center;

margin-top: 10px;

margin-bottom: 10px;

flex:auto;  /*这是关键*/         

}

扩展资料：

Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

main start/main end：主轴开始位置/结束位置；

cross start/cross end：交叉轴开始位置/结束位置；

main size/cross size：单个项目占据主轴/交叉轴的空间；

设置在容器上的属性有6种。

flex-direction

flex-wrap

flex-flow

justify-content

align-item

align-content

html中li标签的css样式问题

li标签的css样式名称是current

其中要说明的就是楼上说的有点小问题，li是dw的默认标签所以不需要调用class,直接设置完css之后li即可生效。不过它控制的是所有的li.如果要控制单个要分开定义css样式，然后再用class或id调用.