Pure.CSS 对齐表单

2025 年 3 月 17 日 | 阅读 1 分钟

类名 "pure-form-aligned" 用于创建一个对齐的表单，与 pure-form 一起应用到 <form> 元素。在这种类型的表单中，标签靠右对齐输入控件，但在较小的屏幕上会恢复为堆叠表单。

示例

<!DOCTYPE html>
<html>

<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
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>

立即测试

输出