Question

我已经实现了2个带有值的选择标签，但是当我执行时，它们没有并排显示，如下面的结果所示。

但我希望并排实现这些选择标签，就像我应该使用margin-top:20px;或任何其他方式来做到这一点

＆＃13;

<!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="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size" placeholder="Select size..." style="width: 300px;" >
              <option />easy	
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
        </div>
        
<div id="example1" role="application">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size1" placeholder="Select size..." style="width: 300px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>
     
            
        </div>






            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();


                   
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");



				
                });
            </script>
        </div>




</!doctype>

＆＃13;

Answer 1

全屏后检查

＆＃13;

<!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" style="width:100%;">
		    <div id="select" class="demo-section k-content" style="float:left;">
           
            <h4 >select</h4>
            <select id="size" placeholder="Select size..." style="width: 300px;" >
              <option />easy	
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
  </div>
        

		    <div id="select" class="demo-section k-content" style="float:left">
           
            <h4 >select</h4>
            <select id="size1" placeholder="Select size..." style="width: 300px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>
     
            
        </div>






            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();


                   
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");



				
                });
            </script>
        </div>




</!doctype>

＆＃13;

Answer 2

首先，您需要将div id="select"包裹在example div中。（您错过了</div> div的example结束标记

然后将样式添加到示例div

 <div id="example" role="application" style="float:left;width:49%; margin-right:2%">
 <div id="example1" role="application" style="float:left;width:49%;margin-right:0">

通过这种方式，他们将永远保持并肩

请参阅下面的代码段。让我知道它是否有帮助

信息：在HTML中使用重复的id并不是一个好主意，例如<div id="select">，并且总是重新检查你的html代码（结束标记，id-s等）

＆＃13;

<!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" style="float:left;width:49%; margin-right:2%">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size" placeholder="Select size..." style="width: 300px;" >
              <option />easy	
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
        </div>
</div>
        
<div id="example1" role="application" style="float:left;width:49%;margin-right:0">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size1" placeholder="Select size..." style="width: 300px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>
     
            
        </div>
 </div>





            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();


                   
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");



				
                });
            </script>





</!doctype>

＆＃13;

如何并排添加多个下拉选择标记

2 个答案: