css文本两端分散对齐样式

最新推荐文章于 2025-06-06 08:24:39 发布

原创最新推荐文章于 2025-06-06 08:24:39 发布 · 847 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现文本两端分散对齐的方法，通过特定的样式设置，如利用伪元素after和text-align属性，使得文本在固定宽度内均匀分布，达到美观的排版效果。

<!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>