把两个div彼此相邻(标签制造一些麻烦)

问题描述:

我想把2个div彼此相邻,但标签正在搞砸东西了.. 我也有麻烦把INPUT放在同一行与标签。把两个div彼此相邻(标签制造一些麻烦)

这是我的HTML代码:

<div class="edit_settings"> 
       <div class="edit_iphone_settings"> 
        <div class="title">IPhone Settings</div> 
        <form action="" method="post" accept-charset="utf-8"><label for="label">Last Application Version: </label> 
     <input type="text" name="last_app_ver" value="2"><label for="label">Update Status: </label> 
     <select name="must_update"> 
     <option value="0">Ignore</option> 
     <option value="1">Force update</option> 
     <option value="2" selected="selected">Suggest for update</option> 
     </select><label for="label">Update Message: </label> 
     <input type="text" name="message" value="Message"><label for="label">Application URL: </label> 
     <input type="text" name="redirect_url" value=""><input type="hidden" name="settings" value="iphone_application"> 
     <input type="submit" name="edit_iphone_settings" value="Edit"></form>  </div> 
       <div class="edit_android_settings"> 
        <div class="title">Android Settings</div> 
        <form action="" method="post" accept-charset="utf-8"><label for="label">Last Application Version: </label> 
     <input type="text" name="last_app_ver" value="2.07"><label for="label">Update Status: </label> 
     <select name="must_update"> 
     <option value="0">Ignore</option> 
     <option value="1">Force update</option> 
     <option value="2" selected="selected">Suggest for update</option> 
     </select><label for="label">Update Message: </label> 
     <input type="text" name="message" value="Message"><label for="label">Application URL: </label> 
     <input type="text" name="redirect_url" value=""><input type="hidden" name="settings" value="android_application"> 
     <input type="submit" name="edit_android_settings" value="Edit"></form>  </div> 
      </div> 

这是我的CSS:

.edit_iphone_settings, .edit_android_settings { 
    width: 300px; 
} 
.edit_settings label { 
    display: inline-block; 
    clear:both; 
    width: 200px; 
} 
.edit_settings input { 
    float: left; 
} 
.edit_android_settings { 
    clear: both; 
} 
+1

预期的结果的图片,或至少一个描述。 – 2013-04-28 12:24:26

这开了窍:

增加edit_iphone_settings容器的width从而使标签和投入有余地并肩。

取下标签

变化float: left对于输入的clear:both属性display: inline-block

.edit_iphone_settings, .edit_android_settings { 
    width: 500px; 
} 
.edit_settings label { 
    display: inline-block; 
    width: 200px; 
} 
.edit_settings input { 
    display:inline-block; 
} 
.edit_android_settings { 
    clear: both; 
} 

Working Fiddle