Aligning three items on same line, two input boxes and one div in the middle - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

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

Description

Aligning three items on same line, two input boxes and one div in the middle

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">
.btn-votes input[type="button"] {
   width:33px;
   height:33px;
   border:0;
   cursor:pointer;
   margin-bottom:-21px;
   display:inline-block;
}

.up {<!--from  w  ww .ja v  a2  s . c o  m-->
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png')
}

.up:disabled {
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png')
}

.down {
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png')
}

.down:disabled {
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png')
}

.label-votes {
   font-size:2.0em;
   color:Chartreuse;
   text-align:center;
   font-weight:bold;
   display:inline-block;
}
</style> 
 </head> 
 <body> 
  <div class="btn-votes"> 
   <input type="button" title="Up" class="up"> 
   <div class="label-votes">
     2 
   </div> 
   <input type="button" title="Down" class="down"> 
  </div>  
 </body>
</html>

Related Tutorials