代码之家 › 专栏 › 技术社区 › zomdar

制作具有双列的表单

forms css html

zomdar · 技术社区 · 11 年前

所以我有了这个表格,我很快就制作好了,这样我现在就可以制作双柱了。

<head>
    </head>
    <body>
        <fieldset>

            <form>
                <div class="half">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name">
                </div>
                <div class="half">
                    <label for="email">Email</label>
                    <input type="text" id="email" name="email">
                </div>
                <div class="half">
                    <label for="zip">Zip / Postal code</label>
                    <input type="text" id="zip" name="zip">
                </div>
                <div class="half">
                    <label for="country">Country</label>
                    <select id="country" name="country"><option></option></select>
                </div>
                <div class="full">
                    <label for="message">Message</label>
                    <textarea id="message" name="message"></textarea>
                </div>
                <div class="half">
                    <input type="checkbox" id="copy" name="copy">
                    <label for="copy">Send me a copy</label>
                </div>
                <div class="half right">
                    <input type="submit" value="send">
                </div>
            </form>
        </fieldset>
    </body>
</html>

CSS:

fieldset { width: 900px; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }

但问题是,当我将div标记放在一半并将其放在html中时。。。。我必须放置两个“半”字段,以便它进入下一行。我不能只把一个半班和另一个半班级放在半班的正下方。我该怎么做?也许再加一节课?

1 回复 | 直到 11 年前

indubitablee 11 年前

添加类 .clear { clear: both; } 这样地:

fieldset { width: 500px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.clear { clear: both; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }

<head>
    </head>
    <body>
        <fieldset>
            <legend>Contact form</legend>
            <form>
                <div class="half">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name">
                </div>
                <div class="clear"></div><!-- added div class clear -->
                <div class="half">
                    <label for="email">Email</label>
                    <input type="text" id="email" name="email">
                </div>
                <div class="half">
                    <label for="zip">Zip / Postal code</label>
                    <input type="text" id="zip" name="zip">
                </div>
                <div class="half">
                    <label for="country">Country</label>
                    <select id="country" name="country"><option></option></select>
                </div>
                <div class="full">
                    <label for="message">Message</label>
                    <textarea id="message" name="message"></textarea>
                </div>
                <div class="half">
                    <input type="checkbox" id="copy" name="copy">
                    <label for="copy">Send me a copy</label>
                </div>
                <div class="half right">
                    <input type="submit" value="send">
                </div>
            </form>
        </fieldset>
    </body>
</html>