CSS 中form表单 前面字体 怎么两端对齐

时间：2024-03-05 09:46:55

做form表单的时候，常有姓名，年龄，公司名称等等，有的是2个字，有的3个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .test1 {
            text-align:justify;
            /*text-justify:distribute-all-lines;*/ /*ie6-8*/
            text-justify: distribute;
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }
    </style>
</head>
<body>
<div style="background-color: pink;width: 120px">
    <div class="test1">姓名</div>
    <div class="test1">性别</div>
    <div class="test1">手机号</div>
    <div class="test1">邮箱地址</div>
    <div class="test1">所在地</div>
    <div class="test1">工作单位</div>
    <div class="test1">家庭住址</div>
</div>
</body>
</html>

 

相关文章