一、使用偽類選擇器和counter屬性

div>div{

counter-increment: count;

}

div>div:before{

content: counter(count,disc);

}

首先指定計算器的名字，再使用：before偽類選擇器插入到div前面，使得有列表的效果。

counter(名字，樣式)第一個參數(shù)是指定計算器的名字，第二個參數(shù)是列表項的樣式，如實心圓，空心圓，羅馬字等。

二、使用屬性display:list-item

display有許多屬性，如table、table-row，可將非表格元素組合為表格的樣式，而list-item則表現(xiàn)為列表的樣式，然后用list-style-type指定項目標(biāo)志。

/*css樣式*/

#list{

display: list-item;

list-style: square;

}

/*html內(nèi)容*/

<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要相對應(yīng)。