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

Question

我正在使用一个叫做jquery即兴的插件在我的网站上创建对话框。我注意到，当您尝试在对话框中添加html select时，会在对话框的边框周围产生一些不需要的空格。

到目前为止，我尝试过的其他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;即可