CSS :after伪类元素实现文字两端对齐

最新推荐文章于 2024-05-25 09:57:38 发布

雾里看花叹朦胧

最新推荐文章于 2024-05-25 09:57:38 发布

阅读量2.9k

点赞数

分类专栏： css3 html5 文章标签： css3 文本两端对齐 justify :after :before

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/87801603

版权

以前很多人都这么干过：两个字中间使用来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算该用几个空格了。

现在 CSS3 中可以使用 text-align: justify 样式来实现这个效果。

例如，如下登录界面，需要实现“用户名：” 和 "密码："文本的两端对齐效果。

<body>
    <article>
        <header>用户登录</header>
        <main>
            <section>
                <label>用户名</label>：
                <input type="text" name="userName" id="userName">
            </section>
            <section>
                <label>密码</label>：
                <input type="password" na

最低0.47元/天解锁文章

雾里看花叹朦胧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS :after伪类元素实现文字两端对齐

以前很多人都这么干过：两个字中间使用&amp;amp;nbsp;来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算该用几个空格了。现在 CSS3 中可以使用 text-align: justify 样式来实现这个效果。例如，如下登录界面，需要实现“用户名：” 和 &amp;quot;密码：&amp;quot;文本的两端对齐效果。&amp;amp;lt;body&amp;
复制链接

扫一扫