I have a form with quite a few yes/no radio button groups, split up into sections with divs (bootstrap cards). Each radiobutton is horizontally aligned, and has a label in the form of a span before it.
<p>
<span class="lbllabel1">Front page documentation complete?:</span>
@(Html.Kendo().RadioGroupFor(m=>m.FrontPageComplete)
.Name("FrontPageComplete")
.Layout(RadioGroupLayout.Horizontal)
.Items(i =>
{
i.Add().Label("No").Value("No");
i.Add().Label("Yes").Value("Yes");
})
)
</p>
The lbllabel1 class is defined as:-
.lbllabel1 {
float: left;
font-size: small;
font-weight: normal;
width: 28.0em;
text-align: right;
clear: left;
margin-right: 5px;
padding-top: 5px;
}
In most cases the labels vertically align well, but the first entry in each div is misaligned (picture attached). How can I ensure proper alignment to teh radiogroup?
Thanks