我有一个用css创建边框的div，我想做的是在用户单击按钮时显示一个表单。
HTML 表单：
<div class="dropshadow-add">
<h3>Add</h3>
<button class="addwebcam">Add</button>
<button class="addaxiscam">Add Another</button>
<div id="cameraformwebcam" title="Add a webcam">
<form id='AddCameraFormWebcam' name='' method='post' action=''>
<label for="CameraName">Camera name: </label>
<input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
<label for='CameraQuality'>Camera quality: </label>
<select id='CameraQuality' name='camera_quality'>
<option value='HIGH' selected='selected'>High</option>
<option value='MEDIUM'>Medium</option>
<option value='MOBILE'>Mobile</option>
</select>
...
<button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
<button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>
<div id="cameraformaxis" title="Add an Axis camera">
<form id='AddCameraFormAxis' name='' method='post' action=''>
<label for="CameraName">Camera name: </label>
<input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
<label for='CameraQuality'>Camera quality: </label>
<select id='CameraQuality' name='camera_quality'>
<option value='HIGH' selected='selected'>High</option>
<option value='MEDIUM'>Medium</option>
<option value='MOBILE'>Mobile</option>
</select>
...
<button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
<button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>
</div>
单击时显示/隐藏表单的 jQuery 代码：
jQuery('#cameraformwebcam').hide();
jQuery('#cameraformaxis').hide();
jQuery('.addwebcam').click(function(e) {
jQuery('#cameraformwebcam').show();
jQuery('#cameraformaxis').hide();
});
jQuery('.addaxiscam').click(function(e) {
jQuery('#cameraformaxis').show();
jQuery('#cameraformwebcam').hide();
});
最后，我的问题是 CSS 代码：
#AddCameraFormWebcam label,#AddCameraFormAxis label,
#AddCameraFormWebcam input,#AddCameraFormAxis input,
#AddCameraFormWebcam select,#AddCameraFormAxis select,
#AddCameraFormWebcam textarea,#AddCameraFormAxis textarea{
display: block;
float: left;
width: 200px;
margin-bottom: 1em;
margin-top: 0.5em;
}
#AddCameraFormWebcam select,#AddCameraFormAxis select{
width: 100px;
}
#AddCameraFormWebcam label,#AddCameraFormAxis label {
clear: both;
color: black;
width: 120px;
padding-right: 8px;
text-align: left;
white-space: nowrap;
}
#AddCameraFormWebcam label.error,#AddCameraFormAxis label.error {
float: none;
color: red;
}
#AddCameraFormWebcam button[type="button"],#AddCameraFormAxis button[type="button"]{
float: right;
width: 100px;
margin-left: 10px;
margin-top: 5px;
}
#AddCameraFormWebcam button[type="submit"],#AddCameraFormAxis button[type="submit"] {
float: right;
width: 100px;
margin-top: 5px;
}
#AddCameraFormWebcam button[name="cancel_changes"],#AddCameraFormAxis button[name="cancel_changes"] {
clear: both;
}
#AddCameraFormWebcam button[name="camera_status"] + label,#AddCameraFormAxis button[name="camera_status"] + label {
clear: none;
}
.dropshadow-add {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
width: 400px;
padding:15px 15px 15px 15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
background-color:#ffffff;
border: 1px solid #CCCCCC;
padding: 1px 15px 15px 15px;
}
看这个小提琴玩。
单击一个按钮，您将看到该表单超出了 div。我怎样才能将它保存在 div 中？如果我将按钮和标签更改为float: inherit它确实有效，但格式就会混乱。我想将表单放在 div 中，并且按钮应该在右侧（添加按钮，然后彼此相邻的取消按钮）。提前致谢。