Question

My code as follows, generated by a software and I cannot change any of the values.

<div class="cred-field cred-field-ticket-month-or-course">
<div class="cred-label">Month or Course</div>
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" checked="checked" value="wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2">per month</label>
</div>
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" value="wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1">per course</label>
</div>
</div>
</div>
<div style="clear: both;"></div>

I need help in putting this radio button side by side (horizontally).

I cannot do this because it will affect other radio buttons on the same page. Is there any other techniques?

.myzebra-radios-single {
  float: left;
}

Answer 1

You can use css cover,

<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">

add class ‘single’, like this:

<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios single">

and css code:

.single .myzebra-radios-single{ float:none;}

the single class can be added to any .myzebra-radios-single father in front of the class

addclass like this:

$('#cred_form_3584_1_wpcf-ticket-month-or-course-radios').addClass('single');