cssCopy code
ul {
display: inline-block
text-align: right
}
将 display 属性设置为 inline-block 将使列表项呈横向布局，而将 text-align 属性设置为 right 将使列表内容靠右对齐。
请注意，如果您希望更改列表中的每个项目的样式，则可能需要对每个列表项目单独定义样式。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0 padding: 0}
ul, li{list-style: none}
ul:after{content: '' display: block clear: both}
li{width: 100px height: 100px background-color: pink font-size: 20px float: left margin-right: 10px}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
使用浮动float即可，但是使用浮动一定记得将父级ul清除浮动，否则它的高度为空，因为里面的li浮动后脱离文档流了。
