css - 颜色代码不在同一行中对齐

我正在用angular js实现颜色代码选择器。试图在同一行中显示颜色选择器，但未在同一行中显示，而是在下一行中显示。

Plunker

谁能帮助我在同一行中显示颜色代码？（不想使用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="[email protected]" 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>

最佳答案

更改您的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>

关于css - 颜色代码不在同一行中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37275587/