html - 表单对齐输入和下拉菜单

Question

如何对齐我的输入框，使第一个与标签对齐，而另外两个与顶部输入框下方对齐。

为什么我的域和下拉菜单不对齐？

CSS:

#newwebsiteForm{
    padding:10px;
    margin:10px 0;
    width:480px;
    position: relative
}
#newwebsiteForm label{
    display:block;
    float:left;
    clear:both;
    margin:0 15px 0 25px;
    width:240px;
    border:1px solid green;
    height:15px
}
#newwebsiteForm input{
    display:block;
    float:left;
    width:240px;
    height:15px;
}
#newwebsiteForm .radioButton {
    width:15px;
    height:15px;
}
#newwebsiteForm .radioText {
    display:block;
    width:30px;
    height:20px;
    float:left;
    font-size:12px;
    border:1px solid red;
}
#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
    display:block;
    float:left;
    margin-left:25px;
    background-color:red;
}
#newwebsiteForm textarea{
    display:block;
    float:left;
}
input#domain,#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}

.form-field{width:220px}

HTML:

 <div id="newwebsiteSection">
                                    <form action="#" id="newwebsiteForm" method="get">
                                    <fieldset>  
                                     <div>
                                     <label>Do You Require Hosting?</label>
                                        <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                                        <span class="radioText">No</span><input  class="radioButton" type="radio" name="No" value="No"/>
                                    </div>
                                    <div>
                                    <label>Do You Require A Domain?</label>
                                        <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                                        <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
                                    </div>
                                    <label>Do You Have A Logo?</label>
                                        <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                                        <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>

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

                                    <label for="newwebsiteType">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>
                                        <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                                        <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>


                                    <div>
                                        <label>Three Favorite colors?</label>
                                        <div class="form-field">
                                            <input id="color1" value=""/>
                                            <input id="color2" value=""/>
                                            <input id="color3" value=""/>
                                        </div>
                                    </div>

                                    <div>
                                    <label>What are your favorite websites?</label>
                                    <div class="form-field">
                                        <input type="text" id="fav1" value=""/>
                                        <input type="text" id="fav2" value=""/>
                                        <input type="text" id="fav3" value=""/>
                                    </div>    
            </div>
                                    <label for="comments">Comments?</label>
                                    <textarea name="comments" id="comments"></textarea>

                                    <input type="submit" name="submit" value="Send Quote Request"/>
                                    </fieldset>
                                    </form>
                                </div>

Answer 1

尽管他们最近受到了各种抨击，但我觉得这是为数不多的几个例子之一，表明 table 实际上不仅有用，而且是最正确的解决方案。