Bootstrap像去點(diǎn)列表一樣,通過(guò)添加類(lèi)名“.list-inline”來(lái)實(shí)現(xiàn)內(nèi)聯(lián)列表,簡(jiǎn)單點(diǎn)說(shuō)就是把垂直列表?yè)Q成水平列表,而且去掉項(xiàng)目符號(hào)(編號(hào)),保持水平顯示。也可以說(shuō)內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。
/*源碼查看bootstrap.css文件第584行~第593行*/
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
看個(gè)示例:
<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>
我也來(lái)試試:完成下面任務(wù)
在右側(cè)代碼編輯器第18行輸入正確代碼,讓列表項(xiàng)水平顯示,如下圖所示:
備注:這一小節(jié)沒(méi)有正確性驗(yàn)證,請(qǐng)查看結(jié)果窗口與任務(wù)所給的結(jié)果圖片是否一致,從而判斷輸入代碼是否正確。
參考代碼:
<ul class="list-unstyled"> <li> 城市: <ul class="list-inline"> <li>北京</li> <li>上海</li> <li>南京</li> <li>廈門(mén)</li> </ul> </li> </ul>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)