Pure.CSS对齐表单

类名” pure-form-aligned” 用于与< form> 元素以及纯格式一起创建对齐表单。在这种类型的表单中, 标签与表单输入控件相对应, 但是在较小的屏幕上会还原为堆叠的表单。
例子

< !DOCTYPE html> < html> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < form class="pure-form pure-form-aligned"> < fieldset> < div class="pure-control-group"> < label for="name"> Username< /label> < input id="name" type="text" placeholder="Username"> < span class="pure-form-message-inline"> This is a required field.< /span> < /div> < div class="pure-control-group"> < label for="password"> Password< /label> < input id="password" type="password" placeholder="Password"> < /div> < div class="pure-control-group"> < label for="email"> Email Address< /label> < input id="email" type="email" placeholder="Email Address"> < /div> < div class="pure-control-group"> < label for="foo"> Supercalifragilistic Label< /label> < input id="foo" type="text" placeholder="Enter something here..."> < /div> < div class="pure-controls"> < label for="cb" class="pure-checkbox"> < input id="cb" type="checkbox"> I've read the terms and conditions < /label> < button type="submit" class="pure-button pure-button-primary"> Submit< /button> < /div> < /fieldset> < /form> < /html>

立即测试
【Pure.CSS对齐表单】输出

文章图片

Pure.CSS对齐表单

推荐阅读

直通车恶意点击怎么办？直通车恶意点击器

绿萝使用什么花肥

小臂肌肉怎样锻炼呢？

2018年3月26日，星期一，伍哥读报时间

全身灰色的猫是什么猫

oppor7手机nfc功能在哪里 oppor7手机分屏怎么弄出来

圆条和正圈有什么区别

2023年南宁市清华园幼儿园招生简章图片 2023年南宁市清华园幼儿园招生简章

学习的名言名句学习的名言名句有哪些

VVC防晒帽（防晒喷雾逼停列车（真相原来是这样））

党参不适合哪些人吃

厕所的水和厨房的水是一个水吗

高中信息技术会考python，浙江高中今年下半年开始信息技术有用新教材python吗

佳能200d像素怎么样佳能200d相机本身照片质量

肺活量低的人怎么长跑长跑如何加量，肺活量低和长跑的关系

realmex是谁家的（realmex是哪家的）

佳能5d3用配闪光灯吗怎么设置佳能5d3用配闪光灯吗

荣耀8xmax三指下滑截屏怎么弄？具体设置操作教程分享

主成分分析适用情况,煤的成分分析基数及适用条件

白茶隔夜能喝吗