序列表转换成横向菜单
如何把一個(gè)無序列表轉(zhuǎn)換成橫向菜單??
首先建立一個(gè)無序列表<html> <body>
<div id='item'>
<ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： 其次當(dāng)要橫向排列時(shí)，一般會把序列前的圓點(diǎn)去除<html> <style type='text/css'> #item ul{list-style:none;} </style> <body>
<div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： ? 接下來，把所有的序列由縱向排序變成橫向排序<html> <style type='text/css'> #item ul{list-style:none;}
#item li{float:left;} </style> <body>
<div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： 現(xiàn)在開始針對橫向菜單進(jìn)行修飾， 1、先是調(diào)整各個(gè)選項(xiàng)卡的大小<html> <style type='text/css'> #item ul{list-style:none;} #item li{float:left;width:100px;} </style> <body> <div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul> </div> </body> </html>
如圖： 2、其次對每個(gè)子選項(xiàng)進(jìn)行塊狀修飾<html> <style type='text/css'> #item ul{list-style:none;} #item li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;text-align:center} </style> <body> <div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul> </div> </body> </html>
最終形成效果如圖 ?轉(zhuǎn)載于:https://www.cnblogs.com/di2wu/p/9401319.html
總結(jié)
以上是生活随笔為你收集整理的序列表转换成横向菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TP框架(接口文档模板框架)
- 下一篇： CodeForces-589B（思维/排