Question

我在角度js中实现颜色代码选择器。试图在同一行显示颜色选择器，但它不显示在同一行，而不是在下一行显示。

有人可以帮我在同一行显示颜色代码吗？（不想使用html-table标签）。

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myctrl">
    <h1>Hello Plunker!</h1>

<div class="tdata" ng-repeat="color in colors"
ng-class="{'selected':$index == selectedRow}"
ng-click="setClickedRow($index)"
style="background-color:{{color}};">
  </div>



  </body>

</html>

Answer 1

将您的div更改为：

<div style="display:table">
<div class="tdata" ng-repeat="color in colors"
ng-class="{'selected':$index == selectedRow}"
ng-click="setClickedRow($index)"
style="background-color:{{color}}; display:table-cell">
  </div>
</div>

Answer 2

尝试使用此css将颜色对齐在同一行：

{{1}}

颜色代码未在同一行中对齐

2 个答案: