我在这里粘贴 html 和 css，当 UI 出现时，额外的空间就会出现。只是不明白它为什么会出现以及如何让它看起来合适。
HTML
<div style="display: block; z-index: 1001; outline: 0px none; height: 400px; width: 400px; top: 77px; left: 428px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all noTitleStuff ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog2"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog2"> </span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="dialog2" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
<div id="Container">
<div id="acloginpod">
<div id="caption"> Enter Login Information </div>
<div class="acloginform">
<fieldset>
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label1">Email Address:</span>
<input type="text" name="ctl00$mstPartBase$rptlogin$ctl00$txtEmail" id="ctl00_mstPartBase_rptlogin_ctl00_txtEmail" tabindex="1" class="textinput">
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label2">Password:</span>
<input type="password" name="ctl00$mstPartBase$rptlogin$ctl00$txtPassword" id="ctl00_mstPartBase_rptlogin_ctl00_txtPassword" tabindex="2" class="textinput">
<div class="aclogin-action">
<div class="fl-left">
<div class="item">
<label>
<input type="checkbox" id="ctl00_mstPartBase_rptlogin_ctl00_chkRemember" name="ctl00$mstPartBase$rptlogin$ctl00$chkRemember" tabindex="3">
Remember me
</label>
</div>
<a id="ctl00_mstPartBase_rptlogin_ctl00_LinkButton1" tabindex="5" class="forgotpass" href="javascript:__doPostBack('ctl00$mstPartBase$rptlogin$ctl00$LinkButton1','')">Forgot password?</a>
</div>
<div id="btn" style="float:right;">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnLogin" value="Login" id="ctl00_mstPartBase_rptlogin_ctl00_btnLogin" class="btnlogin" de="" style="margin-left: 83px">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnRegister" value="Register" id="ctl00_mstPartBase_rptlogin_ctl00_btnRegister" class="btnlogin">
</div>
<div class="clearfix">
</div>
<br>
</div>
</fieldset>
</div>
</div>
</div>
</div></div>
CSS
#acloginpod {
background: url("../Images/acloginpodbg.gif") repeat-x scroll 0 0 #ebebeb;
border: 1px solid #d3d3d3;
}
#acloginpod label {
color: #444;
display: block;
font-size: 15px;
margin-bottom: 3px;
}
#caption {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 3px;
color: White;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding: 10px;
text-align: center;
text-shadow: 0 2px 1px #000;
}
.btnlogin {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 6px;
box-shadow: 0 0 2px #333;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
height: 33px;
padding: 3px 10px;
text-decoration: none;
text-shadow: 0 2px 1px #000;
}
.btnlogin:hover {
background: url("../Images/button-background-2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 3px #046629 inset;
text-shadow: 0 2px 3px #333;
}
.btnlogin:active {
position: relative;
top: 1px;
}
#acloginpod input.textinput {
background: url("../Images/textinputbg.gif") repeat-x scroll 0 0 #ffffff;
border: 1px solid #d3d3d3;
color: #000000;
font-size: 15px;
margin-bottom: 10px;
padding: 7px 0;
text-indent: 7px;
width: 100%;
}
#acloginpod .acloginform {
margin: 22px;
}
#acloginpod form, #acloginpod fieldset {
border-width: 0;
margin: 0 !important;
padding: 0 !important;
}
我也在这里粘贴屏幕截图。
额外的空间出现在两个名为 dialog2 & container 的 div 之间，所以请指导我需要修改哪个 css，因为额外的空间不会出现在左侧、右侧、顶部和底部。谢谢
这是我的代码的js fiddle 演示 http://jsfiddle.net/tridip/jj2cM/
这是我正在运行的完整代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
.noTitleStuff .ui-dialog-titlebar {display:none}
.offscreen {position: absolute; left: -999em;}
.BusyStyles
{
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener2").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$("<div id='dialog2'/>").dialog(
{
autoOpen: false,
width: 50,
height: 50,
dialogClass: 'noTitleStuff',
draggable: true,
resizable: false,
open: function (event, ui) {
$(this).dialog("widget").addClass('BusyStyles');
$(this).parent().appendTo("form");
}
}).dialog('open').show()
.load('login.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
//alert('data found');
// sHtml = responseTxt;
// var element = $(this).find('#Container'); ;
// //$(element).addClass('offscreen').show();
// var width = element.width();
// var height = element.height();
// //alert('h ' + height + ' w ' + width);
// sHtml = $(sHtml).find('#Container').html();
// $sHtml = $(sHtml)
// $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');
$(this).dialog("widget").removeClass('BusyStyles');
$("#dialog2").dialog("widget").animate({
width: '346px',
height: 'auto'
}, {
duration: 200,
step: function () {
$("#dialog2").dialog('option', 'position', 'center');
}
});
$("#dialog2").css({ height: 'auto', width: 'auto' });
//$("#dialog2").html(sHtml);
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
//$("#dialog2").dialog('open').show();
}
else {
$("#dialog2").dialog("close").dialog('destroy').remove();
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
最佳答案
关于html - html 输出中有额外的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24653678/