把两个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;
}
答
这开了窍:
增加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
预期的结果的图片,或至少一个描述。 – 2013-04-28 12:24:26