2016-07-15 15 views
0

Ich habe Kendo-Ui verwendet Dropdown-Menüs in meinem blog zu implementieren, wie Sie sehen können, ich möchte die Box nach oben bewegen, ohne die Beiträge zu beeinflussen. Als ich den Code margin-top:20px; hinzugefügt habe, funktioniert es aber nicht anders, um die Box nach oben zu bewegen.Wie verschiebe ich die Drop-Down-Box nach oben

wie This

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

+0

Überprüft Ihre Website, wählen Sie das Feld ist bereits oben, welches Problem damit? –

+0

@SanjeevK es sollte Pause zwischen den Pfosten und bar das ist, was ich will – overflowstack9

+0

überprüfen Sie die folgende Antwort Sie müssen nur Ihre Marge-top: 20px; mit Rand unten: 0.5em; in

T-Shirt Größe

Antwort

1

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

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

0

gelöst ich hinzugefügt margin-top:20px; zu meinem .post so sind jetzt in down down posts

+1

gut. Dies ist eine Antwort von derselben Person, die die Frage gestellt hat :) Er fragte, er antwortete –

Verwandte Themen