重庆易胜博欧赔建设公司重庆言西早工作室欢迎您!
当前位置
言西早易胜博欧赔建设 > 新闻中心 > 易胜博欧赔知识 > css两端对齐 用css怎么实现两端对齐

css两端对齐 用css怎么实现两端对齐

发布时间:2020-06-28 14:11:37 作者:重庆言西早工作室 阅读:
  方法法一:text-align-last:justify;
 
  html
 
  <div>
 
  <pclass="item">
 
  <labelfor="name"class="itemLabel">姓名</label>
 
  <inputtype="text"class="itemContent"id="name">
 
  </p>
 
  <pclass="item">
 
  <labelfor="phone"class="itemLabel">手机号</label>
 
  <inputtype="text"class="itemContent"id="phone">
 
  </p>
 
  </div>
 
  css
 
  .itemLabel{
 
  display:inline-block;
 
  width:60px;
 
  text-align-last:justify;
 
  }
 
  由于text-align-last的兼容性问题:https://caniuse.com/#search=text-align-last,需要使用法二实现:
 
  css
 
  .item{
 
  position:relative;
 
  }
 
  .itemContent{
 
  position:absolute;
 
  left:70px;
 
  }
 
  .itemLabel{
 
  display:inline-block;
 
  width:60px;
 
  text-align:justify;
 
  }
 
  .itemLabel:after{
 
  display:inline-block;
 
  content:'';
 
  width:100%;
 
  }
 
  用css实现一段文字的两端对齐和分散对齐
 
  <style>
 
  div{
 
  text-align-last:justify;
 
  text-align:justify;
 
  text-justify:distribute-all-lines;//这行必加,兼容ie浏览器
 
  border:1pxsolidred;
 
  width:150px;
 
  }
 
  </style>
 
  <div>鸡你太美</div>