选择Box Alignment

Question

我如何对齐选择框以使其与其他框内联？我也试图用3个选项输入框来做这个。

CSS：

#newwebsiteSection, #websiteredevelopmentSection, #otherSection{
    display:none;
}
#newwebsiteForm form{
    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;
}
#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 select{
    margin-left:123px;
}

#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
    display:block;
    float:left;
    margin-left:25px;
    background-color:red;
}

#newwebsiteForm textarea{
    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">
                        <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">
                        <fieldset>  
                        <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"/>

                        <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"/>

                        <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"/>

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

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

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

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

</section>

Answer 1

您的css表单选择器错误。

#newwebsiteForm form{}

应该只是

#newwebsiteForm{}

我稍微修改了你的html和css以获得这个布局：

html - 在div中包装标签/输入对。这对样式有很大帮助。主机和域对被包装，以便IE7将它们显示在新行上。

    <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>

.form-field类对齐输入。外包装再次帮助IE7格式化。

    <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>

CSS

#newwebsiteForm label{
    height:15px
}
#newwebsiteForm select{
    /*margin-left:123px*/
}
input#domain,
#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}

.form-field{width:220px}

演示：http://jsfiddle.net/mjcookson/GTd9J/

干杯：）