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与内联按钮对齐

回答

相关问题