用CSS样式使DIV变成列表样式的几种方法

一、使用伪类选择器和counter属性

div>div{

counter-increment: count;

}

div>div:before{

content: counter(count,disc);

}

首先指定计算器的名字，再使用：before伪类选择器插入到div前面，使得有列表的效果。

counter(名字，样式)第一个参数是指定计算器的名字，第二个参数是列表项的样式，如实心圆，空心圆，罗马字等。

二、使用属性display:list-item

display有许多属性，如table、table-row，可将非表格元素组合为表格的样式，而list-item则表现为列表的样式，然后用list-style-type指定项目标志。

/*css样式*/

#list{

display: list-item;

list-style: square;

}

/*html内容*/

<div id="#list">

<div>a</div>

<div>b</div>

<div>c</div>

</div>

PS:文本框做成下拉列表框的效果

<input type="text" list="aa" name="b">

<datalist id="aa">

<option>a</option>

<option>b</option>

<option>c</option>

</datalist>

注意两者的id要相对应。