Jquery UI 对话框格式化

Question

在下面的对话框中，我试图让下拉菜单与电子邮件输入框的右侧对齐？我尝试了所有我能想到的方法，但菜单会转到右侧或底部。

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

Answer 1

你需要用包装器抓取电子邮件字段及其标签，并使 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;
 }

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