• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Align radio button with text / numbers (answers) horizontally

#1
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
Reply

#2
You would need to do it using CSS file.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#3
(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;}
Reply

#4
Position Text Labels on Forms Using CSS
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#5
(10-06-2016, 11:48 AM)InsiteFX Wrote: You would need to do it using CSS file.

Thanks, yes css did the magic.
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.