在下面的对话框中,我试图让下拉菜单与电子邮件输入框的右侧对齐?我尝试了所有我能想到的方法,但菜单会转到右侧或底部。
<div id="dialogNewRecipient" title="Add Recipient">
<div class="row">
<label for="NewFullName">Name:</label>
<input id="NewFullName" type="text">
</div>
<div class="row">
<div class="form-group">
<div class="container">
<label for="NewEmail">Email:</label>
<input id="NewEmail" type="text">
<ul class="nav navbar navbar-right">
<li class="label"></li>
<li class="dropdown" id="emailDropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">@@tax.ny.gov<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">@@tax.ny.gov</a></li>
<li><a href="#">@@scom.tax.ny.gov</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="form-group center-block">
<button id="SaveRecipient" type="button">Save</button>
<button id="CancelRecipient" type="button">Cancel</button>
</div>
</div>
</div>
最佳答案
你需要用包装器抓取电子邮件字段及其标签,并使 css 中的字段包装器和菜单包装器向左浮动
更改您的 HTML:
<div id="dialogNewRecipient" title="Add Recipient">
<div class="row">
<label for="NewFullName">Name:</label>
<input id="NewFullName" type="text">
</div>
<div class="row">
<div class="form-group">
<div class="container">
<div class="form-group">
<label for="NewEmail">Email:</label>
<input id="NewEmail" type="text">
</div>
<ul id="menu" class="nav navbar">
<li class="label"></li>
<li class="dropdown" id="emailDropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">@@tax.ny.gov<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">@@tax.ny.gov</a></li>
<li><a href="#">@@scom.tax.ny.gov</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="form-group center-block">
<button id="SaveRecipient" type="button">Save</button>
<button id="CancelRecipient" type="button">Cancel</button>
</div>
</div>
将此添加到您的 CSS 代码中:
.form-group, #menu {
display: inline-block;
float: left;
}
这些编辑会将菜单放在电子邮件字段的右侧。
关于Jquery UI 对话框格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34531122/