HTML Select2與內聯按鈕對齊

我對Web編程相當陌生。我試圖做一個簡單的Select2選取器，然後在它旁邊有按鈕。我遇到的問題是我似乎無法弄清楚如何讓「清除」和「全部」按鈕與select2選取器的頂部均勻對齊。HTML Select2與內聯按鈕對齊

我說與頂端對齊，因爲當我向multipicker添加更多選擇時，它將垂直增長。所以我試圖讓按鈕中心與拾取器對齊，而沒有任何東西或只選擇了一件事。我在裏面也使用了一些Velocity模板代碼，但是我很確定這些都可以。所有用於格式化的AUI類都來自Atlassian Jira。這裏是我的

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

JS斌的鏈接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>

來源

2016-09-16 Justin A

將此CSS添加到此行，並且無論高度如何更改，它都將保持居中居中。

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

您可以將它添加到課程中或像我一樣保持內聯。我這樣做，所以你可以看到它放置在哪裏。

你也可以將margin-left:12px;更改爲任何你想要的。

來源

2016-09-16 23:24:06

謝謝@kervon瑞安這個工作，你解釋。我稍微修改了這些值，以防止它在select2框中隨着它的增長而居中。我只是想讓它錨定select2區域的頂部。 –

HTML Select2與內聯按鈕對齊

回答

相關問題