+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Align radio button with text / numbers (answers) horizontally (/showthread.php?tid=66303)
Align radio button with text / numbers (answers) horizontally - cndunga - 10-06-2016
Dear All,
I have the following code for a quiz:
</div>
<h4 class="quction" >
<?php echo $q->question;?>
</h4>
<table width="100%" border="0" class="answeers">
<input type="hidden" name="<?php echo $q->questionid;?>" value="0" id="" checked >
<?php
if (isset($q->answer1)) {
?>
<tr>
<td>
<input type="radio" name="<?php echo $q->questionid;?>" value="1" id=""><?php echo $q->answer1;?>
</td>
</tr>
<?php } ?>
<?php
if (isset($q->answer2)) {
?>
<tr>
<td>
<input type="radio" name="<?php echo $q->questionid;?>" value="2" id=""><?php echo $q->answer2;?>
</td>
</tr>
<?php } ?>
<?php
if (isset($q->answer3)) {
?>
<tr>
<td>
<input type="radio" name="<?php echo $q->questionid;?>" value="3" id=""><?php echo $q->answer3;?>
</td>
</tr>
<?php } ?>
<?php
if (isset($q->answer4)) {
?>
<tr>
<td>
<input type="radio" name="<?php echo $q->questionid;?>" value="4" id=""><?php echo $q->answer4;?>
</td>
</tr>
<?php } ?>
When I execute it, it produces the results as shown below
std 5
Question
Which of the following numbers is divisible by 4
☐
2700
☐
5445
☐
67670
☐
20038
How can I align the text / number to read like below?
Question
Which of the following numbers is divisible by 4
☐ 2700
☐ 5445
☐ 67670
☐ 20038
Your assistance will be appreciated, Thanks
RE: Align radio button with text / numbers (answers) horizontally - InsiteFX - 10-06-2016
You would need to do it using CSS file.
RE: Align radio button with text / numbers (answers) horizontally - cndunga - 10-06-2016
(10-06-2016, 11:48 AM)InsiteFX Wrote: You would need to do it using CSS file.
Forgive my lack of knowledge, I have checked on my style.css file below but was not able to. What to i need to add to the css to resolve the problem?
body, html {
width: 100%;
height: 100%;
background: #2d3c4d !important;
font-family:"open Sans" !important;
font-size:13px !important;
line-height:25px;
}
ul, ol { clear:both !important;}
.top-header {
background: #2d3c4d;
border-bottom: 3px solid #fff;
}
.logo {
background: #437ba3;
width: 100%;
padding: 0px; height:50px;
}
.padd {
padding: 0 !important; clear: both;
}
.menu {
float: right;
width: 40%;
}
.profile {
padding: 0;
float: left;
border-right: solid 1px #ccc;
width: 48%;
}
.profile-im {
border: 2px #fff solid;
padding: 0px 0px;
margin-top: 5px;
float: left
}
.profile-name {
float: left;
font-size: 14px;
padding: 12px 10px; color:#fff;
.lg {
border: medium none;
padding: 4px 15px;
}
.quction {
clear: both;
font-size: 13px;
font-weight: 600;
line-height: 25px;
margin: 0;
padding: 0;
}
.answeers {
font-size: 13px;
line-height: 35px;
}
.down-buttons {
border-top: 1px solid #ccc;
margin: 15px 0px; clear:both;
}
.down-bt {
background: none repeat scroll 0 0 #437ba3 !important;
border: 0px solid #437ba3;
color: #fff;
font-size: 13px;
margin: 5px;
border-radius: 0px;
margin: 15px 0; border-radius:5px;
}
.down-bt:hover{ background-color:#30668c !important; color:#fff;}
RE: Align radio button with text / numbers (answers) horizontally - InsiteFX - 10-07-2016
Position Text Labels on Forms Using CSS
RE: Align radio button with text / numbers (answers) horizontally - cndunga - 10-17-2016
(10-06-2016, 11:48 AM)InsiteFX Wrote: You would need to do it using CSS file.
Thanks, yes css did the magic.