Jquery UI对话框格式化(Jquery UI dialog formatting)

在下面的对话框中我试图让菜单下拉列表对齐电子邮件输入框的右侧？我已经尝试了我能想到的一切但菜单却向右或向下。

<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>

In the following dialog Im trying to get the menu dropdown to align to the right of the email input box? Ive tried everything I could think of but the menu goes to the right or bottom.

<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; }

这些编辑将菜单放在电子邮件字段的右侧。

you need to grab email field and its label with a wrapper and make the field wrapper and menu wrapper in css floating left

change your 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>

add this to your CSS codes:

.form-group, #menu { display: inline-block; float: left; }

these edits will put the menu to the right of the email field.

更多推荐