【iCSS：布局】使用margin-left排版左重右轻列表

icss-margin-left.markdown

【iCSS：布局】使用margin-left排版左重右轻列表

A Pen by JowayYoung on CodePen.

License.

index.html

<div class="bruce flex-ct-x">
	<ul class="left-list">
		<li>Alibaba</li>
		<li>Tencent</li>
		<li>Baidu</li>
		<li>Jingdong</li>
		<li>Ant</li>
		<li>Netease</li>
	</ul>
</div>

style.scss

.left-list {
	display: flex;
	align-items: center;
	padding: 0 10px;
	width: 600px;
	height: 60px;
	background-color: #3c9;
	li {
		padding: 0 10px;
		height: 40px;
		background-color: #3c9;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		& + li {
			margin-left: 10px;
		}
		&:last-child {
			margin-left: auto;
		}
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />