html+css奇淫技巧 3 教你如何伪类控制字体间距左右排版

效果图，在很多左小标题，右表单或者表格的布局中，很多标题在一定尺寸内要么左对齐，要么又对齐，其实我们可以通过伪类控制达到自动分配的效果。

代码附上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>列表</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .g-purchase-label{
                width: 75px;
                display: inline-block;
            }
            .g-purchase-label .text{
                text-align: justify;
                display: inline-block;
                width: 81%;
                vertical-align: middle;
                position: relative;
                overflow: hidden;
                font-size: 14px;
            }
            .g-purchase-label .text:after{
                content: "";
                display: inline-block;
                width: 100%;
                overflow: hidden;
                height: 0;
            }
            .g-purchase-label i{
                display: inline-block;
                padding: 0 5px;
                vertical-align: middle;
                font-style: normal;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div>
            <label class="g-purchase-label">
                <span class="text">采购单号</span><i>:</i>
            </label>
        </div>
        <div>
            <label class="g-purchase-label"><span class="text">备注</span><i>:</i></label>
        </div>
    </body>
</html>

 

posted @ 2019-09-05 10:35  独孤白菜  阅读(408)  评论(0)  编辑  收藏  举报