Keep radio buttons with their labels on line breaks - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

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

Description

Keep radio buttons with their labels on line breaks

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">

.radios {<!--from  w w  w.j a  v a2s  .c  o  m-->
   width: 100px;
   overflow: hidden;
}
.radios > span {
   white-space: nowrap;
}


      </style> 
 </head> 
 <body> 
  <div class="radios"> 
   <span> <input type="radio" id="productTypeRC"> <label for="productTypeRC">RC</label> </span> 
   <span> <input type="radio" id="productTypeTC"> <label for="productTypeTC">TC</label> </span> 
   <span> <input type="radio" id="productTypeNS"> <label for="productTypeNS">NS</label> </span> 
   <span> <input type="radio" id="productTypeCX"> <label for="productTypeCX">CX</label> </span> 
   <span> <input type="radio" id="productTypeCM"> <label for="productTypeCM">CM</label> </span> 
   <span> <input type="radio" id="productTypeVR"> <label for="productTypeVR">VR</label> </span> 
  </div>  
 </body>
</html>

Related Tutorials