カラーコードが同じ行に配置されていません

私は角度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="[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>

出典

2016-05-17 RCM

次のようになりますし、あなたの 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>

出典

2016-05-17 12:07:47 Venkat

のthatsが働いていました。ありがとうvenkat。私はまた、カラーコードの間にいくつかのスペースが必要です。 – RCM

内側のdivのスタイリングにパディングを追加 – Venkat

は、同じ行に並んだ色のため、このCSSを試してみてください：

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

出典

2016-05-17 12:11:49 Jainam

Thanks Jainam .. – RCM

カラーコードが同じ行に配置されていません

答えて

関連する問題