Trying to get input and submit boxes on the same line - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Trying to get input and submit boxes on the same line

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#mailchimp {<!--from ww  w.  j av a 2s  . c o  m-->
   background:Chartreuse;
   color:yellow;
   padding:11px 8px;
   height:21px;
}

#mailchimp input {
   border:medium none;
   color:blue;
   font-family:architects daughter;
   font-size:0.8rem;
   font-style:italic;
   margin-bottom:3px;
   padding:3px 3px;
   width:301px;
   border-radius:11px;
   -moz-border-radius:11px;
   -webkit-border-radius:11px;
}

#mailchimp input.email {
   background:pink;
}

#mailchimp input.name {
   background:OrangeRed;
}

#mailchimp input[type="submit"] {
   background:grey;
   color:BlueViolet;
   cursor:hand;
   font-size:0.8rem;
   width:100px;
   padding:5px 0;
}

#mailchimp input[type="submit"]:hover {
   color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div id="mailchimp"> 
   <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> 
    <div style="float:left;padding-right: 15px;"> 
     <input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
    </div> 
    <div style="float:left; "> 
     <input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
    </div> 
    <div id="mce-responses" class="clear"> 
     <div class="response" id="mce-error-response" style="display:none"></div> 
     <div class="response" id="mce-success-response" style="display:none"></div> 
    </div> 
    <div class="clear" style="float:right;"> 
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
    </div> 
   </form> 
  </div>  
 </body>
</html>

Related Tutorials