css文本两端分散对齐样式

CSS 专栏收录该内容
4 篇文章 0 订阅
<!DOCTYPE html>
<html>
<head>
    <title>文本两端分散对齐</title>
    <meta charset="UTF-8" />
    <style>
        /*文本两端分散对齐*/
        ul{
            font-size: 12px;
            list-style: none;
        }

        li{
            height: 30px;
            line-height: 30px;
            clear: both;
            color: #444;
        }

        span{
            color: #e62f2f;
            font-weight: bold;
            margin-right: 10px;
            width: 100px;
            float: left;
            -webkit-text-align:justify;
            text-align:justify;
            -webkit-text-align-last:justify;
            text-align-last:justify;
        }

        /*这个地方的伪类after很重要!*/
        span:after{
            content:'';
            overflow:hidden;
            width:100%;
            height:0;
        }
    </style>
</head>

<body>
<ul>
    <li><span>【头版头条】</span>里约奥运会完美收官,中国代表团凯旋而归</li>
    <li><span>【娱乐】</span>王宝强事件转入司法程序,结局难预测</li>
    <li><span>【体育】</span>中国代表团里约之行大总结,26金努力必有收获</li>
    <li><span>【社会实事】</span>实在编不下去了</li>
    <li><span>【国家时政】</span>打字太累了,还很费脑子</li>
    <li><span>【国防军事】</span>其实我就是想写一个简单的demo</li>
    <li><span>【朋友圈】</span>跟朋友圈毛关系没有,就他三个字</li>
    <li><span>【视频动新闻】</span>这个也是毛关系没有,就因为他五个字</li>
    <li><span>【最新跟踪报道】</span>哈哈哈你没猜错,就是因为这个栏目六个字</li>
    <li><span>【历史】</span>历史还是因为自己比较喜欢,乾隆到底有没有得过天花</li>
    <li><span>【新闻大调查】</span>诶呀我去,我竟然又相出了一个五个字的,好了够了!</li>
</ul>
</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值