Working Fiddle

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

把两个div放在一起（标签制造麻烦）

1 个答案:

Working Fiddle