如何將下拉框移動到頂部

我已經使用kendo-ui在我的blog中實現了下拉菜單，因爲您可以看到我想將此框向上移動而不影響帖子。當我添加代碼margin-top:20px;但它沒有任何其他方式將框移動到向上。如何將下拉框移動到頂部

像

<!doctype html> 
 

 

 
    
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 

 

 
     <div id="example" role="application"> 
 
\t \t  <div id="tshirt-view" class="demo-section k-content"> 
 
      
 
      <h4 style="margin-top: 2em;">T-shirt Size</h4> 
 
      <select id="size" placeholder="Select size..." style="width: 300px;" > 
 
       <option />X-Small 
 
       <option />Small 
 
       <option />Medium 
 
       <option />Large 
 
       <option />X-Large 
 
       <option />2X-Large 
 
      </select> 
 
     
 
      
 
     </div> 
 
     
 
      <script> 
 
       $(document).ready(function() { 
 
        // create ComboBox from input HTML element 
 
        
 
        // create ComboBox from select HTML element 
 
        $("#size").kendoComboBox(); 
 

 
        
 
\t \t \t \t \t var select = $("#size").data("kendoComboBox"); 
 

 

 
\t \t \t \t 
 
       }); 
 
      </script> 
 
     </div> 
 

 

 

 

 
</!doctype>

來源

2016-07-15 overflowstack9

檢查您的網站，選擇框已在頂部，這是什麼問題？ –

@SanjeevK它應該是中間帖子和酒吧多數民衆贊成在我想要的 – overflowstack9

檢查下面的答案，你只需要更換你的邊緣頂部：20px;邊緣底部：0.5em;在

T恤大小

–

<!doctype html> 
 

 

 
    
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 

 

 
     <div id="example" role="application"> 
 
\t \t  <div id="tshirt-view" class="demo-section k-content"> 
 
      
 
      <h4 style="margin-bottom: .5em;">T-shirt Size</h4> 
 
      <select id="size" placeholder="Select size..." style="width: 300px;" > 
 
       <option />X-Small 
 
       <option />Small 
 
       <option />Medium 
 
       <option />Large 
 
       <option />X-Large 
 
       <option />2X-Large 
 
      </select> 
 
     
 
      
 
     </div> 
 
     
 
      <script> 
 
       $(document).ready(function() { 
 
        // create ComboBox from input HTML element 
 
        
 
        // create ComboBox from select HTML element 
 
        $("#size").kendoComboBox(); 
 

 
        
 
\t \t \t \t \t var select = $("#size").data("kendoComboBox"); 
 

 

 
\t \t \t \t 
 
       }); 
 
      </script> 
 
     </div> 
 

 

 

 

 
</!doctype>

來源

2016-07-15 05:56:48

<!doctype html> 



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 



    <div id="example" role="application"> 
     <div id="tshirt-view" class="demo-section k-content"> 

     <h4 style="margin-bottom: .5em;">T-shirt Size</h4> 
     <select id="size" placeholder="Select size..." style="width: 300px;" > 
      <option />X-Small 
      <option />Small 
      <option />Medium 
      <option />Large 
      <option />X-Large 
      <option />2X-Large 
     </select> 


    </div> 

     <script> 
      $(document).ready(function() { 
       // create ComboBox from input HTML element 

       // create ComboBox from select HTML element 
       $("#size").kendoComboBox(); 


       var select = $("#size").data("kendoComboBox"); 



      }); 
     </script> 
    </div>

來源

2016-07-15 06:02:47 Ranjan

解決我添加margin-top:20px;我的.post所以職位現在出現在下降

來源

2016-07-15 06:06:43 overflowstack9

。這是來自問這個問題的同一個人的回答:)他問他回答 –

如何將下拉框移動到頂部

T恤大小

回答

相關問題