在css中,可以利用float屬性來把ul文字變成橫向排列,只需要給ul列表的li元素添加“float:left;”樣式,讓li元素往左浮動即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
默認(rèn)ul列表是豎向排列:
<ul> <li>測試文本1</li> <li>測試文本1</li> <li>測試文本1</li> </ul>
效果圖:
那么如何把ul文字變成橫向排列?可以利用float屬性。
下面通過代碼示例來看看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul li{ float: left; margin-right: 30px; } </style> </head> <body> <ul> <li>測試文本1</li> <li>測試文本1</li> <li>測試文本1</li> </ul> </body> </html>
效果圖:
(學(xué)習(xí)視頻分享:css視頻教程)