Layout two buttons and one text field with text field in the middle - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

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

Description

Layout two buttons and one text field with text field 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">

button,<!-- w w w  .ja v  a  2  s . c  om-->
.quantity {
   float: left
}
.bold {
   font-weight: bold;
}
.font20 {
   font-size: 20px;
}
.quantity {
   text-align: center;
   border: 1px solid #ccc;
   display: block;
   width: 70px;
   overflow-x: auto;
   font-weight: bold;
   margin: 0 10px;
}
.clearFloat {
   clear: both;
}


      </style> 
 </head> 
 <body> 
  <button class="btn btn-danger btn-xs minus"> <span class="glyphicon glyphicon-minus">-</span> </button> 
  <span class="quantity bold font20" val="1">99999</span> 
  <button class="btn btn-success btn-xs plus"> <span class="glyphicon glyphicon-plus">+</span> </button> 
  <div class="clearFloat"></div>  
 </body>
</html>

Related Tutorials