Question

我使用了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">
		    <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();

                   
					var select = $("#size").data("kendoComboBox");


				
                });
            </script>
        </div>




</!doctype>

Answer 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>




</!doctype>

Answer 2

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

Answer 3

解决了我将margin-top:20px;添加到我的.post中，因此帖子现在显示在

中

如何将下拉框移动到顶部

3 个答案: