表单label两端对齐之css实现

shaonbean 发布于2019-08-30 15:55 / 1692人阅读

摘要：主要属性参见最终效果代码姓名请输入字符请输入字符密码请输入字符请输入字符确认密码请再输入一遍密码请输入字符验证码输入验证码请输入验证码注意英文字符和数字不会两端对齐

主要属性：

text-align: justify;

text-align-last: justify; 参见https://www.css88.com/book/css/properties/text/text-align-last.htm

最终效果：

代码：

        li {
            clear: both;
            list-style: none;
        }
    
        .mark {
            display: block;
            float: left;
            overflow: hidden;
            width: 78px;
            height: 29px;
            padding-right: 10px;
            text-align: justify;
            text-align-last: justify;
            line-height: 2;
        }

注意：

英文字符和数字不会两端对齐

私有云服务器托管文本两端对齐 html两端对齐字节对齐算法实现 html 表单css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117243.html

【译】HTML表单指南---第一个HTML表单

摘要：一个表单由一或多个部件组成，这些部件可以是文本框单行或多行选择框按钮复选框或单选按钮。在我们的示例里，一个文本框中用了该属性的默认值，该值表示一个基本的单行文本框，用于接收无控制或验证的任何文本。前言这个系列译自mdn上的一份表单指南，原文详尽阐述了表单相关的基础知识。而表单作为一个经典的页面交互方式，是每个前端工程师绕不开的话题，通过翻译这个系列的文章既是有助于扫清自己的知识盲区...

yearsj 2019-08-02 15:55 评论0 收藏0
手机端单行文字两端对齐：用css伪类实现

摘要：今天在做项目的时候碰到这个问题右侧红线内的小标题单行两端对齐。两端对齐的属性我们知道是，但是这个属性有它的局限性只能为或多行文字才能实现两端对齐。也就是说，在现在的情况下，小标题的单行文字仅仅使用是实现不了两端对齐的。今天在做项目的时候碰到这个问题：右侧红线内的小标题单行两端对齐。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

JasonZhang 2019-08-29 12:53 评论0 收藏0
浮动的label

摘要：下面就介绍一个用伪类实现的浮动。这种浮动的效果和的效果不同，前者是获取到焦点，立马开始浮动，而后者是当用户输入内容时也就是消失时，开始浮动。在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于 label+input 的布局方案多种多样...

Aomine 2019-08-29 16:56 评论0 收藏0
浮动的label

摘要：下面就介绍一个用伪类实现的浮动。这种浮动的效果和的效果不同，前者是获取到焦点，立马开始浮动，而后者是当用户输入内容时也就是消失时，开始浮动。在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于 label+input 的布局方案多种多样...

Honwhy 2019-08-05 15:09 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0