css - 将 html 选择添加到对话框导致不需要的 css 空白

Question

我正在使用一个名为 jquery impromptu 的插件在我的网站上创建对话框。我注意到，当您尝试向对话框添加 html 选择时，它会在对话框的边框周围产生一些不需要的空白。

到目前为止，我尝试过的其他 html 表单控件都没有这个问题。这只是 html 选择。

我需要修复一些与 css 相关的东西来解决这个问题，但我无法弄清楚。有人可以帮我解决这个问题吗？

var textAreaStr = '<div>' + 
					  '<label>Note<textarea id="registerFlagNote" rows="7" cols="30">						</textarea></label><br/>'+
					  '</div>';

var selectHtmlStr = '<div>' + 
						'<label>Close flag?<select id="registerFlagClosedOpenInd">' +
						'<option value="no" selected>No</option>'+
						'<option value="yes">Yes</option>'+
						'</select></label>'
						'</div>';		
// try text area by itself
//var htmlStr = textAreaStr + '<br/>';
// try select by itself
//var htmlStr = selectHtmlStr + '<br/>';
//try both
var htmlStr = textAreaStr + selectHtmlStr + '<br/>';

var statesdemo = {
	state0: {
		html:htmlStr,
		buttons: { Cancel: false, Next: true },
		focus: 1,
		submit:function(e,v,m,f){
			$.prompt.close();
		}
	}
};

$.prompt(statesdemo);

div.jqimessage div textarea,
div.jqimessage div select{
	display:block;	
}

/*div.jqi {
    padding: 0 !important;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.js"></script>

谢谢

Answer 1

如果你检查元素到类 .jqi

你会看到这个

div.jqi {
    width: 400px;
    max-width: 90%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    position: absolute;
    background-color: #ffffff;
    font-size: 11px;
    text-align: left;
    border: solid 1px #eeeeee;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 7px;
}

只需删除 padding:7px;