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>
I changed the code to move the first option by itself and removed the fieldset as can be seen here