表或列表？

Question

我已经发布了几次这个问题了，我已经弄清楚了我所获得的格式问题，但我想重新评估一下这种情况（我认为过早地跳得太深了）并且希望得到一个更好的答案。

现在工作正常，如下图所示，但我想知道最佳做法，也许可以更精确地排列。

所以下面的表格是两个列表。实际上，三个列表包括一个黑客在顶部“同意”和“不同意”。

但有些事情让我觉得有点坎坷。不是很好。一个随时随地的拼凑解决方案。

你们如何做到这一点，以便ng-repeat可以在不同的时间动态生成包含不同数量的用户比较的列表？

这是我的代码：

$scope.profileCompare = {

        You: {
            questionAnswer: [false, true, false, false, false, false],
            percent: ['0%', '20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Unimportant",
            match: "30%"
        },
        Pizza: {
            questionAnswer: [false, true, true, false, false, false],
            percent: ['0%', '20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Important",
            match: "30%"
        },
        Greenie: {
            questionAnswer: [false, true, false, false, true, false],
            percent: ['0%', '20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Very Important",
            match: "40%"
        }
    }

.result1 {
    float: left;
    width: 125px;
    position:relative;
    left: 10px;

}

.result1 ul li{
    display: inline-block;
    list-style-type: none;
    padding: 1em;
    width: .4em;
    text-align: right;
    font-size:1em;
    position:relative;
    right:25px;
}

.result {
    float: left;
}

.result ul li{
    display: inline-block;
    list-style-type: none;
    padding: 1em;
    width: .4em;
    text-align: right;
    font-size:1em;
    position:relative;
    right:25px;
}

<div class="comparisons">
	<p>{{question}}</p>
  <br>
  <div class="comparisons-background">
  	<a href="#/cl-background">
  		go to background
  	</a>
  </div>
</div>



<div>

  <div class="result1"style="display:inline; margin:0 auto">
    <div><br><br><br>
    </div>
    <div ng-repeat="(key, profile) in profileCompare">
      <p>{{key}}:</p>
      <p style="font-size:80%">{{profile.questionImportance}},</p>
      <p style="font-size:90%; font-weight: bold"> {{profile.match}} match </p>
      <br>
    </div>
  </div>

  <div class="result" style="display:inline">
    <ul>
      <li>Agree</li><li></li><li></li><li></li><li>Disagree</li>
    </ul>
  </div>
  <div ng-repeat="(key, profile) in profileCompare">
      <div class="result">
      <ul>
          <li ng-repeat="answer in profile.questionAnswer track by $index"><i class="fa" ng-class="{green:answer, red:!answer, 'fa-check-square':answer, 'fa-square':!answer}"></i></li>
          <br><br>
      </ul>
      </div>
  </div>
</div>

Answer 1

更加语义正确的解决方案是使用CSS定位Agree / Disagree标签，而不是在它们之间阻塞无意义的<li>。您可以float left和right，或使用absolute position来完成此操作。

此外，<ol>在技术上会比<ul>更正确，因为评级 已订购。

P.S。复选框不应该是无线电吗？