关于licss样式模板的信息

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

相关问答

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

Q2: css控制ul标签下li样式

在ul标签下li的默认样式为一个实心圆（disc）   可忽略不写

li样式的改变是用 list-style:属性值 来改变的

我们给li设置css，去除默认样式（实心圆）

将li的样式设置为空心圆

将li的样式设置为实心正方形

其他：

 decimal   :  　CSS1　阿拉伯数字

  lower-roman   :  　CSS1　小写罗马数字  

  upper-roman   :  　CSS1　大写罗马数字  

  lower-alpha   :  　CSS1　小写英文字母  

  upper-alpha   :  　CSS1　大写英文字母  

  armenian   :  　CSS2　传统的亚美尼亚数字  

  cjk-ideographic   :  　CSS2　浅白的表意数字  

  georgian   :  　CSS2　传统的乔治数字  

  lower-greek   :  　CSS2　基本的希腊小写字母 

  hebrew   :  　CSS2　传统的希伯莱数字  

  hiragana   :  　CSS2　日文平假名字符  

  hiragana-iroha   :  　CSS2　日文平假名序号  

  katakana   :  　CSS2　日文片假名字符  

  katakana-iroha   :  　CSS2　日文片假名序号  

  lower-latin   :  　CSS2　小写拉丁字母  

upper-latin   : 　CSS2　大写拉丁字母 

Q3: css样式修改li水平显示

将li的样式设置成以下例子:display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;可以修改一下，到适合你的要求。

Q4: html中li标签的css样式问题

li标签的css样式名称是current

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

Q5: css样式中的li

表示和当前li同级的所有li标签。不包括父级li和子级li。

另外常用的还有lili：这个表示当前li的子级li标签。