私は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に入れたいのですが、ボタンは右側にあるはずです（ボタンを追加してから、ボタンを並べてキャンセルします）。前もって感謝します。