CSS教程

使用css实现文本两端对齐

本文主要是介绍使用css实现文本两端对齐,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

原图效果:
在这里插入图片描述
效果图:
在这里插入图片描述
实现代如下:
HTML代码:

 <ul>
      <li>大道至简</li>
      <li>菩提</li>
      <li>只可意会</li>
      <li>不可言</li>
    </ul>

CSS样式:

ul{
  float: left;
}
ul li{
  width:80px;
  height:30px;
  list-style-type: none;
  background: orange;
  line-height: 30px;
  margin:5px 0;
  padding:0 10px;
  box-sizing: border-box;
  text-align-last: justify; // 实现属性
}
这篇关于使用css实现文本两端对齐的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!