HTML Select2 与内联按钮对齐

Question

我对网络编程还很陌生。我正在尝试制作一个简单的 Select2 选择器，然后在它旁边放置按钮。我遇到的问题是我似乎无法弄清楚如何让 "Clear" 和 "All" 按钮与 select2 选择器的顶部均匀对齐。

我说与顶部对齐是因为当我向多重选择器添加更多选择时，它会垂直增长。所以我试图让按钮与选择器居中对齐，而没有选择任何东西或只选择一件事。我也在其中使用了一些 Velocity 模板代码，但我很确定那没问题。所有用于格式化的 AUI 类来自 Atlassian Jira。这是我

的 link

http://jsbin.com/lejixo/edit?html,output

JS Bin 在 jsbin.com

有什么建议吗？？

<html>
<head>
    <!-- External dependencies -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.js"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.js"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.css" />
    <!-- / External dependencies -->
</head>
<body>
    <section id="content" role="main">
        <div class="aui-page-panel">
            <div class="aui-page-panel-inner">
                <section class="aui-page-panel-content">
                    <form id="admin" class="aui" action="" method="POST" enctype="multipart/form-data">
                        <div class="aui-group">
                            <div class="aui-item">
                                <div class="field-group">
                                    <label for="baseline">Baseline(s):</label>
                                    <!-- Trigger -->
                                    <script type="text/javascript">
                                        AJS.$(function() {
                                            var $exampleMulti = AJS.$("#baseline").auiSelect2({
                                                placeholder: "All"
                                            });
                                            AJS.$(".js-programmatic-multi-set-val").on("click", function() {
                                                $exampleMulti.val(["CA", "AL"]).trigger("change");
                                            });
                                            AJS.$(".js-programmatic-multi-clear").on("click", function() {
                                                $exampleMulti.val(null).trigger("change");
                                            });
                                        });
                                    </script>
                                    <script>
                                        console.log($baselineD.class.name);
                                    </script>
                                    <div class="input-group">
                                        <select id="baseline" name="baseline" style="width: 170px" value="${baseline}" multiple="">
                                            #foreach($baseline in $instance.getAllBaselines())
                                              <option value="${baseline}">$baseline</option>
                                            #end 
                                            #set ($listType = "java.util.ArrayList") 
                                            #if($baselineD.class.name == $listType) 
                                              #foreach( $bl in ${baselineD}) 
                                                #if(${bl})
                                                  <option selected="selected">${bl}</option>
                                                #end 
                                              #end 
                                            #else 
                                              #if ( $baselineD )
                                                <option selected="selected">${baselineD}</option>
                                              #end 
                                            #end
                                        </select>
                                        <div class="aui-buttons input-group-btn" role="group">
                                            <button type="button" class="aui-button js-programmatic-multi-set-val btn btn-default">
                                                All
                                            </button>
                                            <button type="button" class="aui-button js-programmatic-multi-clear btn btn-default">
                                                Clear
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="field-group">
                                    <label for="priority">Priority:</label>
                                    <!-- Trigger -->
                                    <script type="text/javascript">
                                        AJS.$(function() {
                                            AJS.$("#priority3").auiSelect2({
                                                placeholder: "All"
                                            });
                                        });
                                    </script>
                                    <select id="priority3" name="priority" style="width: 170px" value="${priority}">
                                        #if(${priorityD})
                                          <option selected="selected">${priorityD}</option>
                                        #end
                                        ##<option value="All">All</option>
                                        #foreach( $priority in $instance.getPriorities())
                                          <option value="${priority}">$priority</option>
                                        #end
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </section>
</body>
</html>

Answer 1

将此 CSS 添加到此行，无论高度如何变化，它都将始终居中在右侧。

<div class="aui-buttons input-group-btn" role="group" style="margin-left:12px;position:absolute;top: 50%; transform: translateY(-50%);">

您可以将其添加到 class 或像我一样将其保持在行内。我是这样做的，所以你可以看到把它放在哪里。

您也可以将 margin-left:12px; 更改为任何您想要的。

HTML Select2 与内联按钮对齐

HTML Select2 alignment with inline buttons

html

javascript

css

jquery-select2