html - 表单对齐 CSS

Question

这是我在开发中真正讨厌的一件事是表单。下面是我的代码，我要做的是将输入与标签 Name: input 对齐。在对表单进行编码时，您是否使用规则来帮助内存？

CSS:

 #newwebsiteForm form{
    padding:10px;
    margin:10px 0;
    width:480px;
    position: relative;
}
#newwebsiteForm label{
    width:240px;
    display:block;
    float:right;
}
#newwebsiteForm input{
    width:240px;
    display:block;
    float:left;
}

HTML:

<section id="content">
                <h1>Free Quote</h1>
                    <p>Please fill out the below questionnaire to receive your free web development quote</p>
                        <form action="" method="post" accept-charset="utf-8">
                            <select name="requiredOption" id="requiredOption">
                                <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
                                <option id="newwebsite" value="newwebsite">New Website</option>
                                <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
                                <option id="other" value="other">Other</option>
                            </select>
                        </form>
                        <div id="newwebsiteSection">
                            <form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
                            <fieldset>  
                            <label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>What is your Domain?</label>
                            <input type="url" name="domain" value="http://example.com"></input></div>

                            <label>Type of site Required?<label>

                                <select name="newwebsiteType" id="newwebsiteType">
                                <option value="shoppingCart">Shopping Cart</option>
                                <option value="CMS">Content Management System</option>
                                <option value="static">Static Website</option>
                                <option value="otherDevelopment">Other Development</option>
                            </select>

                            <label>Do You Require A Design?</label>
                            <input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Three Favorite colors?</label>
                                <input name="color1" value=""></input>
                                <input name="color2" value=""></input>
                                <input name="color3" value=""></input>

                                <label>What are your favorite websites?</label>
                                <input type="text" name="fav1" value=""></input>
                                <input type="text" name="fav2" value=""></input>
                                <input type="text" name="fav3" value=""></input>

                            <label>Comments?</label>
                            <textarea name="comments" id="comments"></textarea>

                            <input type="submit" name="submit" value="Send Quote Request">
                            </form>
                        </div>
                            <div id="websiteredevelopmentSection">
                                <p>Website Redevelopment</p>
                            </div>
                                <div id="otherSection">
                                    <p>Other</p>
                                </div>

    </section>

Answer 1

仅仅因为表格是更简单的选择并不意味着正确使用它们。

这是一篇关于 CSS 表单设计的精彩文章。 http://www.alistapart.com/articles/prettyaccessibleforms

作者建议将每个标签/输入元素存储在有序列表元素中，使它们保持分组。

我刚刚用它为各种迷你网站实现了一堆表单，效果很好!您只需分别将 ol li 标签元素的显示属性从 display:inline-block 更改为 display:block，即可将标签对齐到输入旁边或上方。

让文本与单选按钮或复选框对齐可能有点棘手，但可以通过添加 span 元素并为其设置样式来实现。

最重要的是它可以跨浏览器兼容!

希望对您有所帮助。