CSS+UL+LI橫向布局是Web開發(fā)中常用的一種布局方式，通過CSS樣式設(shè)置實現(xiàn)一排橫向的列表展示。
在HTML中使用
和- 標(biāo)簽創(chuàng)建一個無序列表，列表項用
- 標(biāo)簽包圍。在CSS中，使用display: inline-block;表明要顯示為一排橫向排列的元素。
pre {
background-color: #f5f5f5;
font-family: "Consolas", "Courier New", monospace;
font-size: 16px;
line-height: 1.4;
margin-bottom: 1.6em;
padding: 1em;
white-space: pre-wrap;
}
我們可以給每個li標(biāo)簽設(shè)置寬度、高度、邊框和內(nèi)邊距等樣式。
li {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
padding: 10px;
}
最終的效果如下：這種橫向布局可以用于創(chuàng)建一些菜單、導(dǎo)航、輪播圖等Web頁面中常見的功能模塊，提高了頁面的可讀性和用戶的體驗。同時，使用CSS+UL+LI橫向布局也可以在移動設(shè)備上獲得更好的顯示效果和交互體驗。
