2011-09-29 291 views
0

我怎么能对准我的输入框,以便第一个与标签一致,另外两个在顶部输入框下方排列。表校准输入和下拉菜单

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

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> 

enter image description here

+0

的文本对齐CSS属性可以大大帮助您:http://www.w3schools.com/cssref/pr_text_text-align.asp – Jlange

回答

0

尽管所有长颈瓶,他们已经得到了最近,我觉得这是哪里的一个少数例子之一table其实不仅是有用的,但最正确的解决方案。