CSS中展示多個li并排展示是一種常見的布局方式。通過以下代碼,可以實現(xiàn)多個li元素橫向排列:
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; color: #000000; background-color: #ffffff; border: 1px solid #cccccc; }
以上代碼中,通過設置ul元素的overflow屬性為hidden,使得li元素在橫向排列時不會出現(xiàn)換行。li元素的float屬性設置為left,使得多個li元素能夠橫向排列。li元素的內部a標簽設置為display:block,使得整個li元素可以被點擊,并且設置padding屬性以增加a標簽的點擊區(qū)域。通過設置text-align:center屬性和padding屬性,可以使得a標簽內部的文本居中顯示。border屬性和background-color屬性可以添加樣式裝飾。
使用以上代碼可以輕松實現(xiàn)多個li并排展示的效果,適用于導航欄和菜單等多種場景。