Question

我正在尝试在HTML中找到一个类似于缩放比例的代码。我有三个问题：

我想说 - 左边没有罪，非常有罪
我想要它说 - 左边有很多伤害，右边没有伤害
我希望它说 - 左边不确定，右边非常肯定。

有谁知道如何编码？

Answer 1

一种更“现代”的方式（不使用表格）：

<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。我使用了以下DOCTYPE标记（你做总是包含一个DOCTYPE，对吧？）;）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 2

这是Bill的答案的简化版本。如果您将每个人li放在一起ul，则不需要对每个人.likert li { float: left; list-style-type: none; }进行分类。我绝对同意这不是table元素的适当或语义用法。这是答案的列表。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Demo in Fiddle

<强>截图：

Answer 3

单选按钮能完成这项工作吗？

 <style type="text/css">
    #likert { text-align:center; }
    #likert td { width: 70px; }
 </style>

  <table id="likert">
     <tr>
         <td><input id="radGuiltyStart" type="radio" name="Guilty" value="1" /></td>
         <td><input type="radio" name="Guilty" value="2" /></td>
         <td><input type="radio" name="Guilty" value="3" /></td>
         <td><input type="radio" name="Guilty" value="4" /></td>
         <td><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" /></td>
     </tr>
     <tr>
         <td>Not Guilty</td>
         <td></td>
         <td></td>
         <td></td>
         <td>Very Guilty</td>
     </tr>
  </table>

Answer 4

基于JJ的答案，如果你包含标签并将它们全部放在一行上会更好。

<table id="likert">
     <tr>
         <td><label>Not Guilty<input id="radGuiltyStart" type="radio" name="Guilty" value="1" /></label></td>
         <td><label><input type="radio" name="Guilty" value="2" /></label></td>
         <td><label><input type="radio" name="Guilty" value="3" /></label></td>
         <td><label><input type="radio" name="Guilty" value="4" /></label></td>
         <td><label><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" />Very Guilty</label></td>
     </tr>
...

HTML格式的Likert量表

4 个答案: