2016-05-17 3 views
0

Я реализую подборщик цветовых кодов в угловых js. Пробовал отображать подборщик цветов в одной строке, но он не отображается в одной строке, а не отображается в следующих строках.Цветовые коды, не выровненные в одной строке

Plunker

Может кто-нибудь помочь мне, чтобы показать код цвета в той же строке? (не хотите использовать тег ).

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

ответ

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

Thats работал. Спасибо, венкат. Я также хочу некоторое пространство между цветовыми кодами. – RCM

+0

Добавить дополнение к стилю внутреннего div – Venkat

1

Попробуйте CSS для цвета выровнены в одной строке:

.tdata.ng-scope { 
    float: left; 
} 
+0

Спасибо Jainam .. – RCM

Смежные вопросы