html - 如何将下拉框移到顶部

标签 html css

我已经使用 kendo-ui 在我的 blog 中实现下拉菜单如您所见,我想将框向上移动而不影响帖子。当我添加代码 margin-top:20px; 但它没有任何其他方法可以向上移动框。

喜欢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">
		    <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>

最佳答案

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

关于html - 如何将下拉框移到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38388726/

相关文章:

javascript - jQuery版本与div搜索效果冲突

php - 如何直接将php发送到另一个页面?

javascript - 在悬停时制作一个 div 覆盖链接

html - 如何获得粘性页脚?

html - HTML img 元素中的 iOS Safari SVG 不起作用?

javascript - 如何将琐事测验的答案随机放置在按钮槽中

html - 为什么<li>显示在容器之外?

html - 旋转时图标在 IE9 和 IE10 中消失

css - SASS偏移位置mixin麻烦

javascript - 使用 css 问题显示和隐藏一个 div 添加按钮单击时间