Align input and buttons in the same line within a div tag - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

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

Description

Align input and buttons in the same line within a div tag

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from ww  w  .j  a va  2  s  . c o m-->
 <body> 
  <div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;"> 
   <div style="float: left;"> 
    <input type="button" value="<<"> 
   </div> 
   <div style="float: left;"> 
    <input type="button" value="<"> 
   </div> 
   <div style="float: left;"> 
    <input type="text"> 
   </div> 
   <div style="float: left;">
     of 
   </div> 
   <div style="float: left;"> 
    <input type="text"> 
   </div> 
   <div style="float: left;"> 
    <input type="button" value=">"> 
   </div> 
   <div style="float: left;"> 
    <input type="button" value=">>"> 
   </div> 
   <div style="clear:both"></div> 
  </div>  
 </body>
</html>

Related Tutorials