How to align radio group in fieldset

33 Views Asked by At

I have a form with a radio group in a fieldset. Here is my jsfiddle. I have two issues.

1 - The legend Options has a space on the left which I can't figure out how to remove. It should left-align with the Path word above it.

2 - The radio buttons start one line down from the legend. I want the first radio button to be on the same line as the word Options.

Would someone explain how to fix this, please? Here is my code:

    <style>
    .form-title {display:inline-block;margin-left:8px;font-weight:bold;width:100px;border:1px solid red}
    .form-data {display:inline-block;margin-left:10px;border:1px solid blue}
    .form-radio {display:inline-block;margin-left:102px;}
    .form-legend {display:inline-block;margin-left:0px;font-weight:bold;vertical-align:top;margin:0;padding:0;}
    </style>

    <form name="settings-form" method="post">   
       <div>
         <div class="">
           <label for="domain" class="form-title">Domain</label>
           <input type="text" class="form-data" name="domain" id="domain">
         </div>  
         <div class="">
           <label for="path" class="form-title">Path</label>
           <input type="text" class="form-data" name="path" id="path">
         </div>  
         <div> 
           <fieldset style="border:0;">
             <div class="form-legend"><legend>Options</legend>
               <div class="form-radio">      
                 <label for="dcc0"><input type="radio" class="form-data" name="opt0" id="dcc0">Check 1</label><br>
                 <label for="dcc1"><input type="radio" class="form-data" name="opt1" id="dcc1">Check 2</label><br>
                 <label for="dcc2"><input type="radio" class="form-data" name="opt2" id="dcc2">Check 3</label><br>
                 <label for="dcc3"><input type="radio" class="form-data" name="opt3" id="dcc3">Check 4</label><br>
                 <label for="dcc4"><input type="radio" class="form-data" name="opt4" id="dcc4">Check 5</label><br>
               </div>
             </div>   
           </fieldset>
         </div>
       </div>   
       <div style="margin-top:130px;"> 
       <input type="submit" class="button button-primary" name="save-settings" id="save-settings" value="Save Settings">
       </div>
    </form>
1

There are 1 best solutions below

2
user3052443 On

I changed the code to move the first option by itself and removed the fieldset as can be seen here

    <style>
    .form-group {margin-bottom:8px;}
    .form-title {display:inline-block;margin-left:8px;font-weight:bold;width:140px;}
    .form-data {display:inline-block;margin-left:20px;border:1px solid green;}
    .form-legend {display:inline-block;margin-left:5px;font-weight:bold;vertical-align:top;border:0;}
    .form-radio {display:inline-block;margin-left:172px;border:0;}
    .form-radio-title {display:inline-block;margin-left:8px;margin-right:98px;border:0;font-weight:bold;}        
    </style>

    <form name="settings-form" method="post">   
       <div>
         <div class="form-group">
           <label for="domain" class="form-title">Domain</label>
           <input type="text" class="form-data" name="domain" id="domain">
         </div>  
         <div class="form-group">
           <label for="path" class="form-title">Path</label>
           <input type="text" class="form-data" name="path" id="path">
         </div>  
         <div> 
         <div class="">
           <label for="dcc0" class="form-radio-title">Options</label>
           <input type="radio" class="form-data" name="opt0" id="dcc0">Check 1
         </div>  
         <div class="form-radio">      
         
               <div class="form-radio">      
                 <label for="dcc1"><input type="radio" class="form-data" name="opt1" id="dcc1">Check 2</label><br>
                 <label for="dcc2"><input type="radio" class="form-data" name="opt2" id="dcc2">Check 3</label><br>
                 <label for="dcc3"><input type="radio" class="form-data" name="opt3" id="dcc3">Check 4</label><br>
                 <label for="dcc4"><input type="radio" class="form-data" name="opt4" id="dcc4">Check 5</label><br>
               </div>
             </div>   
         </div>
       </div>   
       <div style="margin-top:130px;"> 
       <input type="submit" class="button button-primary" name="save-settings" id="save-settings" value="Save Settings">
       </div>
    </form>