css - 将两个 div 并排放置（标签会造成一些麻烦）

Question

我试图将 2 个 div 并排放置，但标签把事情搞砸了。我也无法将 INPUT 与标签放在同一行。

这是我的 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;
}

Answer 1

这可以解决问题：

增加容器的width，edit_iphone_settings使标签和输入有空间并排。

移除clear:both标签的属性

将输入更改float: left为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;
}

工作小提琴