表格布局

来源：互联网发布：stm32仿真软件编辑：程序博客网时间：2024/05/09 15:05

表格布局（举例）：

html代码：

<main class="form">        <h3>订购星巴克咖啡豆</h3>        <form action="success.html" method="post">            <div class="row">                <div class="cell"><label for="beans">你喜欢的咖啡豆品种:</label></div>                <div class="cell">                    <input type="text" id="beans" list="beans_list">                    <datalist id="beans_list">                        <option value="House Blend（首选咖啡）">                        <option value="Kenya（肯亚咖啡）">                        <option value="Organic Guatemala（危地马拉有机咖啡）">                    </datalist>                </div>            </div>            <div class="row">                <div class="cell">类型：</div>                <div class="cell">                    <input type="radio" id="type1" name="type" value="1" checked>                    <label for="type1">咖啡豆</label><br>                    <input type="radio" id="type2" name="type" value="2">                    <label for="type2">咖啡粉</label>                </div>            </div>            <div class="row">                <div class="cell"><label for="bags">数量（袋）：</label></div>                <div class="cell">                    <input type="number" id="bags" name="bags" min="1" max="10">                </div>            </div>            <div class="row">                <div class="cell"><label for="date">希望送货日期：</label></div>                <div class="cell">                    <input type="date" id="date" name="date">                </div>            </div>            <div class="row">                <div class="cell">附加服务：</div>                <div class="cell">                    <input type="checkbox" id="extras1" name="extras" value="1">                    <label for="extras1">礼品包装</label><br>                    <input type="checkbox" id="extras2" name="extras" value="2">                    <label for="extras2">商品目录</label>                </div>            </div>            <div class="row">                <div class="cell heading">邮寄地址</div>                <div class="cell"></div>            </div>            <div class="row">                <div class="cell"><label for="name">姓名：</label></div>                <div class="cell">                    <input type="text" id="name" name="name" placeholder="请输入收货人姓名" required>                </div>            </div>            <div class="row">                <div class="cell"><label for="address">详细地址：</label></div>                <div class="cell">                    <input type="text" id="address" name="address" placeholder="请输入详细收货地址" required>                </div>            </div>            <div class="row">                <div class="cell"><label for="zip">邮编：</label></div>                <div class="cell">                    <input type="text" id="zip" name="zip" placeholder="请输入邮编" required>                </div>            </div>            <div class="row">                <div class="cell"><label for="phone">联系电话：</label></div>                <div class="cell">                    <input type="tel" id="phone" name="phone" placeholder="请输入收货人手机号" required>                </div>            </div>            <div class="row">                <div class="cell"><label for="comments">留言：</label></div>                <div class="cell">                    <textarea id="comments" name="comments" maxlength="50"></textarea>                </div>            </div>            <div class="row">                <div class="cell"></div>                <div class="cell"><input type="submit" value="现在订购"></div>            </div>        </form>    </main>

css代码：

*表单*/main.form{    margin-left: 0;}main.form h3 {    color: #006f47;    font-size: 1.2em;    margin-bottom: 10px;    text-align: center;}main.form form {    display: table;    width: 900px;    padding: 10px;}main.form .row {    display: table-row;}main.form .cell {    display: table-cell;    vertical-align: top;    padding: 3px;}main.form .row .cell:first-child {    text-align: right;    padding-right: 20px;}main.form div.heading {    font-weight: bold;}main.form textarea {    width: 400px;    height: 50px;}

0 0