Menu
I am trying to find code for a likert scale in HTML. I have three questions:
I want it to say - Not Guilty on the left and Very Guilty
I want it to say - A lot of Damage on the left and No Damage on the Right
I want it to say - Not Certain on the left and Very Certain on the Right.
Does anyone know how to code this?
364
Here's a simplified version of Bill's answer. You don't need to class each individual li if you put it on the whole ul. I'd definitely agree that this is not the appropriate or semantic use of the table element. This is a list of answers.
.likert li {
float: left;
list-style-type: none;
}<ul class="likert">
<li> Not Guilty </li>
<li><input type="radio" name="guilty" value="1" /></li>
<li><input type="radio" name="guilty" value="2" /></li>
<li><input type="radio" name="guilty" value="3" /></li>
<li><input type="radio" name="guilty" value="4" /></li>
<li><input type="radio" name="guilty" value="5" /></li>
<li> Very Guilty </li>
</ul>Demo in Fiddle
Screenshot:
122
A more "modern" way to get there (without using a table):
<head>
<style type="text/css">
.likert ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.likert li
{
float: left;
text-align: left;
list-style-type: none;
}
</style>
</head>
<body>
<div>
<ul class="likert">
<li class="likert"> Not Guilty <input id="radGuiltyStart" type="radio" name="Guilty" value="1" />
<li class="likert"><input type="radio" name="Guilty" value="2" />
<li class="likert"><input type="radio" name="Guilty" value="3" />
<li class="likert"><input type="radio" name="Guilty" value="4" />
<li class="likert"><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" /> Very Guilty
</ul>
</div>
</body>
NB. I used the following DOCTYPE tag (you do always include a DOCTYPE, right?) ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
