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