列表中的标题固定宽度后两端对齐CSS
  1iMnUWoR4lQ1 2023年11月02日 20 0
<ul class="info-ul">
      <li class="info-li clearfix">
        <span class="titleText">类型<i></i></span>
        <span class="punctual">:</span>
        <span class="content">课题</span>
      </li>      
      <li class="info-li clearfix">
        <span class="titleText">联系电话</span>
        <span class="punctual">:</span>
        <span class="content">13211112222</span>
      </li>
      <li class="info-li clearfix">
        <span class="titleText">自适应</span>
        <span class="punctual">:</span>
        <span class="content">测试测试测试测试</span>
      </li>
</ul>
.info-ul {
    padding: 20px 0 0 20px;
    .info-li {
      padding-bottom: 10px;
      .punctual {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        float: left;
        margin-right: 5px;
        display: inline-block;
      }
      .titleText {
        width: 70px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        float: left;
        position: relative;
        padding-left: 12px;
        text-align: justify;
        text-align-last: justify;
        background: url(../images/arrow.png) no-repeat 0 4px;
      }
      .content {
        width: 620px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        float: left;
      }
    }
    .info-li:last-child {
      padding-bottom: 0;
    }
  }
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

1iMnUWoR4lQ1