CSS布局技巧三【使用letter-spacing排版倒序文本、使用margin-left排版左重右轻列表（导航）】

使用letter-spacing排版倒序文本

• 要点：通过letter-spacing设置负值字体间距将文本倒序
• 场景：文言文、诗词
• 兼容：letter-spacing

  <div class="bruce flex-ct-x">
  	<div class="reverse-text">恭喜发财</div>
  </div>
  <style lang="scss">
  .reverse-text {
  	font-weight: bold;
  	font-size: 50px;
  	color: $red;
  	letter-spacing: -100px; // letter-spacing最少是font-size的2倍
  }
  </style>

   

 

 

使用margin-left排版左重右轻列表

• 要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
• 场景：右侧带图标的导航栏
• 兼容：margin

  <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 lang="scss">
  .left-list {
  	display: flex;
  	align-items: center;
  	padding: 0 10px;
  	width: 600px;
  	height: 60px;
  	background-color: $green;
  	li {
  		padding: 0 10px;
  		height: 40px;
  		background-color: $orange;
  		line-height: 40px;
  		font-size: 16px;
  		color: #fff;
  		& + li {
  			margin-left: 10px;
  		}
  		&:last-child {
  			margin-left: auto;
  		}
  	}
  }
  </style>