Home/ Questions/Q 66173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T19:03:42+00:00

<style type=text/css> body { font-family:Helvetica, sans-serif; font-size:12px; } p, h1, form, button { border:

  • 0
<style type='text/css'> body {     font-family:Helvetica, sans-serif;      font-size:12px; } p, h1, form, button {   border: 0;   margin: 0;   padding: 0; } .spacer {   clear: both;   height: 1px; } /* ----------- My Form ----------- */ .myform {     margin: 0 auto;     width: 400px;     padding: 14px; }     /* ----------- basic ----------- */     #basic {         border: solid 2px #DEDEDE;     }     #basic h1 {         font-size: 14px;         font-weight: bold;         margin-bottom: 8px;     }     #basic p {         font-size: 11px;         color: #666666;         margin-bottom: 20px;         border-bottom: solid 1px #dedede;         padding-bottom: 10px;     }     #basic label {         display: block;         font-weight: bold;         text-align: right;         width: 140px;         float: left;     }     #basic .small{         color:#666666;         display:block;         font-size:11px;         font-weight:normal;         text-align:right;         width:140px;     }     #basic input{         float:left;         width:200px;         margin:2px 0 30px 10px;     }     #basic button{          clear:both;         margin-left:150px;         background:#888888;         color:#FFFFFF;         border:solid 1px #666666;         font-size:11px;         font-weight:bold;         padding:4px 6px;     } </style>  <div id='basic' class='myform'>   <form id='form1' name='form1' method='post' action=''>     <h1>Sign-up form</h1>     <p>This is the basic look of my form without table</p>     <label>Name         <span class='small'>Add your name</span>     </label>     <input type='text' name='textfield' id='textfield' />      <label>Email     <span class='small'>Add a valid address</span>     </label>     <input type='text' name='textfield' id='textfield' />      <label>Email     <span class='small'>Add a valid address</span>     </label>     <!-- Problem --->     <input type='radio' name='something' id='r1' class='radio' value='1' /><label for='r1'>One</label>     <input type='radio' name='something' id='r2' class='radio' value='2' /><label for='r2'>Two</label>     <!-- Problem --->     <button  type='submit'>Sign-up</button>     <div class='spacer'></div>     </form> </div>

I was given this example form, however I cannot add radio buttons without them being messed up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. (within the style tags) add these new style rules: 

    #basic input.radio {     width:20px;  } #basic label.radiolabel {     width:40px;     text-align:left;     line-height:24px; }

    in your html:

    add a new class to each label, like so:

    <!-- Problem --->     <input type='radio' name='textfield' id='r1' class='radio' value='1' /> <label for='r1' class='radiolabel'>One</label>     <input type='radio' name='textfield' id='r2' class='radio' value='2' /> <label for='r2' class='radiolabel'>Two</label>     <!-- Problem --->

    edit:added line-height to the label’s styling 🙂

    • 0