html 设置表单字段的样式以在2列上呈现 - 水平字段

Posted 2021-05-11

<style>
  	.oddClass {
    	float: left;
      	width: 47%;
    }
  
  	.evenClass {
    	float: right;
      	width: 47%;
    } 	
</style>

<script type="text/javascript">
ijQuery( document ).ready(function(){
  	ijQuery( 'form.email-form .input-holder:odd' ).addClass('oddClass'); 
  	ijQuery( 'form.email-form .input-holder:even' ).addClass('evenClass');
});
</script>

<style>
@media only screen and (min-width: 640px){  
  	.oddClass {
    	float: left;
      	width: 47%;
    }
  	.evenClass {
    	float: right;
      	width: 47%;
    } 	
}
</style>
<script type="text/javascript">
ijQuery( document ).ready(function(){
  	ijQuery( 'form.email-form .input-holder:odd' ).addClass('oddClass'); 
  	ijQuery( 'form.email-form .input-holder:even' ).addClass('evenClass');
});
</script>

// using the HC solution for multiple horizontal fields and only for desktop

<style>
@media only screen and (min-width: 640px){  
  	.one-third {
    	float: left;
      	width: 32%;
      	margin-right: 2%;
    }
  
  	.last-col {
      margin-right: 0;
    } 	
}
</style>

<script type="text/javascript">
ijQuery( document ).ready(function(){
    ijQuery( 'form.email-form .input-holder:eq(0)' ).addClass("one-third");
    ijQuery( 'form.email-form .input-holder:eq(1)' ).addClass("one-third");
    ijQuery( 'form.email-form .input-holder:eq(2)' ).addClass("one-third").addClass("last-col");
});
</script>

<!--START code for horizontal fields - first 2 fields for all the forms on the page-->
<script type="text/javascript">
    ijQuery(document).ready(function() {
        ijQuery('form.email-form .input-holder:nth-of-type(1)').css({
            float: 'left',
            width: '47%'
        });
        ijQuery('form.email-form .input-holder:nth-of-type()').css({
            float: 'right',
            width: '47%'
        });
    });

</script>
<!--END code for horizontal fields - first 2 fields for all the forms on the page-->