zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    当一个模块没有默认导出
    <<平仓>>
    模态对话框
    PlanB S2F 模型
    <<深入React技术栈>> CSS Modules
    状态提升
    ol.proj.transform 坐标系转换
    HTMLVideoElement.srcObject MediaStream MediaSource Blob File
    毛玻璃特效 backdrop-filter
    Filter
  • 原文地址:https://www.cnblogs.com/xiaobaicai123/p/11463395.html
Copyright © 2011-2022 走看看